ホームページ > 記事 > ウェブフロントエンド > vue2.0sにおける兄弟コンポーネント通信のeventBus実装の詳細説明

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

小云云オリジナル: 2018-01-22 09:18:301273ブラウズ

この記事では主に 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 &#39;vue&#39;; 
export default new Vue();

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

import Bus from &#39;common/js/bus.js&#39;;

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

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

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

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

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

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

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

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

関連記事