Vue下的EventBus

EventBus 是用於 Vue 中組件通信的一種方式，常見的父子組件溝通方式有 emit 和 props。
但假如跨組件傳參溝通，或者是兄弟姐妹組件之間的傳參溝通，使用EventBus或者Vuex就可以避免很多重複的 props 和 emit。
Vuex 適合的場景是中大型的項目，管理全站共用的狀態。EventBus 比較適用於小型的項目，不是太複雜的事件。

使用#

EventBus 實際上只是一個 Vue 的實例，接著分別調用這個實例的事件觸發和監聽來實現通信和參數傳遞。主要是下面四種方法：

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