Vuejs - 親子以外のコンポーネント間の情報の交換

Question

2つのVueJsコンポーネント間で情報を交換しようとしています。

ここには状況があります。

コンポーネントAが主要コンポーネントです。成分B

からIは、成分は同じものを使用しているhere場合がわかりました、Iは成分Dの変数値を変更する B及びCは、Aにあり、そしてDは、C

にあります最初のコンポーネントからルートにブロードキャストした後、ルートから2番目のコンポーネントにブロードキャストされたデータを取得した後に行うことができます。 私の場合、私のコンポーネントDは、 "コンポーネントツリー"のルートと深いところに直接にはありません...だから、私は試しましたが、これはうまくいかないようです。

これを行う最も簡単なやり方は何ですか？

ありがとうございました。

Answer 1

このような場合は、vueのマニュアルに記載されているようにEventbusを使用します。無意識に情報を渡すための空のVueオブジェクト。

window.EventBus = new Vue(); 

データを受け取るコンポーネントでは、イベントを作成します。

mounted: function() { 
    EventBus.$on('name', function (data) { 
     // Do something with the data 
    }); 
} 

最後に、データを送信するコンポーネントでは、その関数を呼び出す必要があります。

methods: { 
    someFunction: function() { 
     EventBus.$emit('name', data); 
    } 
} 

使いやすいようにEventBusオブジェクトへのアクセスを提供するプロトタイプリンクを作成できます。あなたはthis.$eventBus.$onまたはこのjsFiddleに見られるようthis.$eventBus.$emitを使用してアクセスすることができます

Vue.prototype.$eventBus = window.EventBus 

。