Vue コンポーネントの通信: 親コンポーネントと子コンポーネントの間で通信するにはどうすればよいですか?

Vue コンポーネントの通信: 親コンポーネントと子コンポーネントの間で通信するにはどうすればよいですか?

Vue は、Web アプリケーションを構築するためのコンポーネントベースの方法を提供する人気のある JavaScript フレームワークです。実際の開発では、親コンポーネントと子コンポーネントの間で通信が必要になる場面によく遭遇します。この記事では、Vue で一般的に使用される親子コンポーネント通信メソッドをいくつか紹介し、対応するコード例を示します。

Props

Props は、Vue の親コンポーネントと子コンポーネントの間で最も一般的に使用される通信方法です。これにより、親コンポーネントが子コンポーネントにデータを渡すことができます。子コンポーネントでは、props は配列またはオブジェクトとして宣言され、親コンポーネントから渡されたデータを受け取るために使用されます。

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  props: ['message']
};
</script>

上記の例では、親コンポーネントは message という名前の prop を子コンポーネントに渡します。サブコンポーネントは、渡されたデータを受け取るために、props 配列を通じて同じ名前のプロパティを宣言します。子コンポーネントのテンプレートでは、受信したデータを補間式{{ message }}で表示できます。

Emit

親コンポーネントから子コンポーネントにデータを渡すことに加えて、多くの場合、子コンポーネントから親コンポーネントにデータを送信したり、イベントをトリガーしたりする必要もあります。 Vue は、子コンポーネントが Emit を通じて親コンポーネントと通信する方法を提供します。

<!-- 父组件 -->
<template>
  <div>
    <child-component @rating-updated="updateRating"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    updateRating(rating) {
      // 处理子组件发出的rating更新事件
      console.log('Rating updated:', rating);
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    ...
    <button @click="updateRating">Update Rating</button>
  </div>
</template>
<script>
export default {
  methods: {
    updateRating() {
      const rating = 5; // 子组件的评分数据
      this.$emit('rating-updated', rating);
    }
  }
};
</script>

上記の例では、子コンポーネントのボタン クリック イベントによって updateRating メソッドがトリガーされ、「評価」という名前のメッセージが this.$emit('評価-更新', 評価) を通じて親コンポーネントに送信されます。カスタム イベント、評価データの評価に合格しました。親コンポーネントで @rated-updated="updateRating" を使用して、子コンポーネントによって発行された評価更新イベントをリッスンし、updateRating メソッドでイベントを処理します。

$refs

場合によっては、親コンポーネントから子コンポーネントのプロパティまたはメソッドに直接アクセスする必要があります。 Vue は、この直接アクセス方法を実装するための $refs 属性を提供します。

<!-- 父组件 -->
<template>
  <div>
    <child-component ref="childComponent"></child-component>
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.childComponent.childMethod();
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    Child Component
  </div>
</template>
<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method called.');
    }
  }
};
</script>

上の例では、親コンポーネントのボタン クリック イベントが callChildMethod メソッドを呼び出します。メソッド内では、this.$refs.childComponent を使用して子コンポーネントにアクセスし、子の childMethod メソッドを呼び出します。成分。

Provide/Inject

Provide/Inject は、階層ごとに明示的に移動することなく、祖先コンポーネントがすべての子孫コンポーネントにデータを提供できるようにする高度なコンポーネント通信メソッドです。この通信方法は、レベル間のコンポーネント間の通信に適しています。

<!-- 祖先组件 -->
<template>
  <div>
    ...
    <child-component></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: 'Hello from ancestor component!'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <grandchild-component></grandchild-component>
  </div>
</template>
<script>
import GrandchildComponent from './GrandchildComponent.vue';

export default {
  components: {
    GrandchildComponent
  }
};
</script>

<!-- 孙子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  inject: ['message']
};
</script>

上記の例では、祖先コンポーネントは、provide メソッドを通じて、メッセージという名前のデータを子孫コンポーネントに提供します。孫コンポーネントは、inject: ['message'] を通じてこのデータを挿入し、テンプレート内の {{ message }} を使用して表示します。

上記では、Vue で一般的に使用される親子コンポーネントの通信メソッドを紹介しました。各メソッドには適用可能なシナリオがあります。実際の開発では、ニーズに応じて適切な通信方法を選択できます。この記事が Vue コンポーネントの通信を理解するのに役立つことを願っています。

参考リンク:

• [Vue ドキュメント - コンポーネント通信](https://cn.vuejs.org/v2/guide/components.html#Parent-Child Component Communication)

以上がVue コンポーネントの通信: 親コンポーネントと子コンポーネントの間で通信するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。