Vueの兄弟コンポーネントが通信します

中央イベントバスの通信手段のVueの兄弟コンポーネント

 ダウンロードリンク:https://www.yinxiangit.com

>親 - - 実際には、このような子供のように、達成されるべきであっても、親子通信コンポーネントを介して、通信の兄弟要素を達成するために>子。

中央イベントバスで - ここでは、その後、以下のあなたに伝えるために、このような方法でそれらを繰り返すことではありません。

 

最初のステップ:

Componentsフォルダには、ここでは「バス、JS」という名前のjsファイルを、作成し、その中に以下のコードを記述します。

    import Vue from 'vue';
    const Bus = new Vue();
    export default Bus;

ステップ2:

bus.jsを導入.vueそれぞれ、a.vue兄弟アセンブリb.vueアセンブリおよびコンポーネントの場合、2つのファイル、次のように言葉を選びました:

    import Bus from './bus.js'

書くためのプロジェクトの実際の導入に応じて、特定のパスには、ここにbus.jsと.vueファイルが同じレベルです。

第三段階:

我々は適切な場所でa.vueその後、b.vueするa.vueパス値を達成するためであれば、このようなイベントがトリガされた後、ライフサイクルなどがラインを搭載しており、書き込み:

Bus.$emit("事件名",要传的数据);

ステップ4:

に搭載され書かれたb.vueさん:

Bus.$on('事件名',res=>{
	console.log(res)//传过来的数据	
})

データは、変数の上を通過することができ、それは、データオブジェクトとすることができます。

おすすめ

転載: www.cnblogs.com/bingerger/p/11516759.html