vuejs2 - 単一ファイルコンポーネント階層のイベントバスを作成する方法

Question

LinusBorg hereのソリューションが見つかりました。バスはどのVueインスタンスにもグローバルに登録されています。代わりに複数のスコープ付きバスを作成できるように、これをコンポーネント階層で定義する方法はありますか？基本的に、いくつかの子を持つ複数の「ルート」レベルのコンポーネントがある場合、イベントバスは、すべてのVueインスタンスではなく、「ルート」レベルのコンポーネントとその子コンポーネントにインスタンス化する必要があります。

単純な$emitと$onを使用することはできません。これは、階層が平文parent-childに限定されていないためです。したがって、イベントは複数のレベルに渡らなければなりません。

Answer 1

あなたはeventBus.jsのようなJSファイルを作成し、ちょうどVUEのインスタンスをエクスポートすることができます。

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

、あなたはあなたの.vueファイルにイベントバスをインポートすることができ

import bus from 'path/to/eventBus' 

... 

bus.$on('foo', ...) 

---

更新コメントの議論からの私の答え：

イベント名はstrなのでプレフィックス/名前空間をbus.$emit('domain.foo')やbus.$emit('domain/foo')のようにイベントに追加することができます。

あなたのアプリケーションがますます複雑になると感じたら、ただvuexに行ってください。