vue でコンポーネント間で通信する方法

Vue.js では、コンポーネント間の通信は次の方法で実現できます: 親子通信: プロパティを介したデータの受け渡しまたはイベントのトリガー。祖先と子孫の通信: Provide/Inject を介してデータ ソースを共有します。兄弟コンポーネント通信: イベント バス、Vuex 状態管理、またはカスタム イベント経由。

#Vue でコンポーネント間で通信するにはどうすればよいですか?

はじめに:
Vue.js アプリケーションでは、データとイベントを共有するためにコンポーネント間の通信が重要です。コンポーネント間通信を実現するいくつかの方法は次のとおりです。

親子通信:

• プロパティを介したデータの受け渡し: 親コンポーネントが子コンポーネントにデータを渡します。 props として、サブコンポーネントは v-bind を使用してデータをバインドします。
• イベントによるトリガー: 子コンポーネントはイベントをトリガーし、親コンポーネントにデータを渡します。親コンポーネントは、親コンポーネントのテンプレート内のイベントをリッスンします。

祖先と子孫の通信:

• 提供/注入を通じて: 祖先コンポーネントはデータ ソースを提供し、子孫コンポーネントは注入を通じてデータを取得します。

姉妹コンポーネントの通信:

• イベント バス経由: イベント バスとして機能する Vue インスタンスを作成すると、すべてのコンポーネントがリッスンしてトリガーできるようになります。イベント。
• Vuex による状態管理: Vuex 状態管理ライブラリを使用してグローバル状態を保存し、すべてのコンポーネントからアクセスできるようにします。

カスタム イベント:

• $emit/$on を通じて: 子コンポーネント、親コンポーネントの $emit を通じてカスタム イベントをトリガーします。 $onを通じてイベントに参加します。

属性を渡す例:

<code class="HTML"><!-- 父组件 -->
<template>
  <Child-Component :message="message" />
</template></code>

<code class="HTML"><!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template></code>

イベントによってトリガーされる例:

<code class="HTML"><!-- 子组件 -->
<template>
  <button @click="emitMessage">触发事件</button>
</template>

<script>
export default {
  methods: {
    emitMessage() {
      this.$emit('message', '事件数据');
    }
  }
};
</script></code>

<code class="HTML"><!-- 父组件 -->
<template>
  <Child-Component @message="handleMessage" />
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message); // 输出：事件数据
    }
  }
};
</script></code>

以上がvue でコンポーネント間で通信する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。