VueのEventBus

EventBus は、Vue でコンポーネント間の通信を行うための一つの方法です。一般的な親子コンポーネント間の通信方法には、emit と props があります。しかし、コンポーネント間や兄弟姉妹コンポーネント間でのパラメータの受け渡しを行う場合、EventBus または Vuex を使用することで、props と emit の重複を避けることができます。Vuex は、大規模なプロジェクトやサイト全体で共有される状態の管理に適しています。EventBus は、小規模なプロジェクトや複雑でないイベントに適しています。

使用方法#

EventBus は実際には Vue のインスタンスであり、このインスタンスのイベントの発火とリスニングを呼び出すことで通信とパラメータの受け渡しを実現します。主なメソッドは以下の 4 つです：

$on：リスニングの登録
$once：一度だけリスニング
$off：リスニングの解除
$emit：イベントの送信

通常、ページの created 時にリスニングを登録し、コンポーネントが破棄されるときにリスニングを解除します。

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()