vue2.0sにおける兄弟コンポーネント通信のeventBus実装の詳細説明

この記事では主に vue2.0s で兄弟コンポーネント通信を実装するためのサンプルコードを紹介します。興味のある方は参考にしていただければ幸いです。

vue1.0 では、コンポーネント間の通信は主に、親チェーンに沿って上向きに伝播する vm.$dispatch と、下向きの vm.$broadcast ブロードキャストを通じて実現されます。ただし、vue2.0ではこの使い方は廃止されました。

vuex を追加すると、コンポーネント間の通信がより明確になります。中規模および大規模なプロジェクトの場合は、最初から vuex の使用を計画することが賢明な選択です。

しかし、一部の小規模プロジェクトや、作成途中で $.broadcast と $dispatch が vue2.0 で使用できないことに気付いた私のような人にとっては、より便利なソリューションが必要です。すると、eventBusの役割が反映されます。

主な実用的なアプローチは、相互に通信したい兄弟コンポーネント間に新しい vue インスタンスを導入し、このインスタンスのイベント トリガーとモニタリングをそれぞれ呼び出すことで通信とパラメーター転送を実装することです。

ここに簡単な例を示します:

たとえば、ここには main.vue、click.vue、show.vue という 3 つのコンポーネントがあります。 click と show は親コンポーネント main の下にある兄弟コンポーネントであり、click は v-for を介して親コンポーネント内の複数のリスト項目をトラバースします。ここで実装する必要があるのは、click コンポーネントで click イベントがトリガーされた後、show コンポーネントがどの DOM 要素がクリックされたかをコンソールすることです。

まず、click イベントを click コンポーネントに追加します

<p class="click" @click.stop.prevent="doClick($event)"></p>

doClick() メソッドで show コンポーネントとの通信を実装したい場合は、eventBus を作成するための新しい js ファイルを作成する必要があります新しい vue インスタンスを作成するので、bus.js

import Vue from 'vue'; 
export default new Vue();

という名前を付けます。次に、それを click コンポーネントと show コンポーネントにインポートします。

import Bus from 'common/js/bus.js';

次に、 doClick メソッドでイベントをトリガーします。

methods: { 
  addCart(event) { 
  Bus.$emit('getTarget', event.target);  
  } 
}

ここで、クリック コンポーネントをクリックするたびに、「getTarget」という名前のイベントがバスでトリガーされ、クリックイベントのevent.targetとイベント。

次に、このイベントをリッスンしてパラメータを受け取るために、show コンポーネントの created() フックでバスを呼び出す必要があります:

created() { 
    Bus.$on('getTarget', target => { 
      console.log(target); 
    }); 
   }

このようにして、クリック コンポーネントの各クリック イベントで、イベント. ターゲットはショーに渡され、慰められます。

そのため、eventBus の使用は依然として非常に便利ですが、中規模または大規模なプロジェクトであり、通信がより複雑な場合は、vuex を直接使用することをお勧めします。

関連する推奨事項:

Vueの兄弟コンポーネントの通信方法

​​

Vue.jsコンポーネントの通信例の共有

vueにおけるイベントバスの非親子コンポーネント通信の詳細な説明

Vue。 js コンポーネント通信

におけるいくつかの姿勢の詳細な分析 Vue.js コンポーネントとコンポーネント通信についての詳細な議論

以上がvue2.0sにおける兄弟コンポーネント通信のeventBus実装の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。