EventBus は、Vue でコンポーネント間の通信に使用される一つの方法です。一般的な親子コンポーネント間の通信方法には、emit と props があります。
しかし、コンポーネント間のパラメータの受け渡しや、兄弟コンポーネント間のパラメータの受け渡しを行う場合、EventBus または Vuex を使用することで、多くの繰り返しの props と emit を避けることができます。
Vuex は、大規模なプロジェクトで共有される状態を管理する場合に適しています。EventBus は、小規模なプロジェクトや複雑でないイベントに適しています。
使用方法#
EventBus は実際には Vue のインスタンスであり、このインスタンスのイベントトリガーとリスナーを呼び出して通信とパラメータの受け渡しを実現します。主なメソッドは次の 4 つです。
- $on：リスナーの登録
- $once：一度だけリスンする
- $off：リスナーの解除
- $emit：イベントの送信
通常、ページが作成された時にリスナーを登録し、コンポーネントが破棄された時にリスナーを解除します。
EventBus の作成#
実際には、Vue のインスタンスを作成するだけです。
import Vue from 'vue';
// Event Busの使用
const bus = new Vue();
export default bus;
イベントを送信および受信する必要があるコンポーネントでインポートします。
import bus from '../common/bus';
リスン#
リスンする必要があるコンポーネントの created メソッドで bus を使用してリスンします。
created() {
bus.$on('getSomething', target => {
console.log(target);
});
}
イベントの送信#
methods: {
// イベントをemitする
doSomething(target) {
bus.$emit("getSomething", target);
}
}
リスナーの解除#
EventBus のリスナーは自動的に閉じられないため、リスナーが複数回トリガーされる可能性があります。そのため、$off を使用してバインドを解除する必要があります。
通常、フック関数 beforeDestroy() または destroyed() にバインドされます。
// イベントのリスナーを削除する
bus.$off('getSomething')
// すべてのイベントのリスナーを削除する
bus.$off()