Vue開發中的中央事件總線

　　在Vue開發中會遇到大量的組件之間共享數據的情形，針對不同的情形，Vue有相對應的解決方案。比如，父組件向子組件傳值可以使用props，復雜項目中不同模塊之間傳值可以使用Vuex。但是，對於一些簡單的項目里的非父子組件來說，它們一方面不適用props，另一方面又沒有必要使用Vuex，針對這種情形可以使用中央事件總線（Event Bus）來解決問題。

1、創建中央事件總線

可以使用多種形式創建Event Bus。

Example 1：

// main.js
import Vue from 'vue';
window.eventBus = new Vue();   // 注冊全局事件對象
// 也可以修改Vue的原型鏈
Vue.prototype.$event = new Vue();

Example 2:

// ./event/moduleEvent.vue
<tempalte>
</template>
<script>
    import Vue from 'vue';
    export default new Vue({
        data () {

        }
    })
</script>
// main.js
import moduleEvent from './event/moduleEvent';
Vue.prototype.$event = moduleEvent;

Example 3:

// Example 2 中的創建eventBus的vue文件改為js文件，main.js不變
// ./event/moduleEvent.js
inport Vue from 'vue';
export const moduleEvent = new Vue();
// main.js
import moduleEvent from '../event/moduleEvent';
Vue.prototype.$event = moduleEvent;

2、使用中央事件總線傳值

先在組件A中發射事件：

// moduleA.vue
methods: {
    sendData () {
        // 通過修改Vue原型鏈的方式注冊
        this.$event.$emit('dataFromA', this.dataA);
        // 直接注冊在window上
        // moduleEvent.$emit('dataFromA', this.dataA);      
    }
}

然后就可以在組件B中接收了。組件B可以與組件A是父子、兄弟等等任意關系。

// moduleB.vue
methods: {
    getData () {
        // 通過修改Vue原型鏈的方式注冊
        this.$event.$on('dataFromA',  function (data) {
            // handle data code
            // 回調函數的參數data即為組件A傳遞的值
        });
        // 直接注冊在window上
        // moduleEvent.$emit('dataFromA',  function (data) {
            // handle data code
            // 回調函數的參數data即為組件A傳遞的值
        // });      
    }
}

3、單次接收事件或者移除事件Listeners

如果你只想監聽一次該事件。可以使用 this.$event.$once(channel: string, callback(payload1, payload2, ...))，事件觸發一次后將移除事件。

如果你想移除自定義事件監聽器，你可以使用  this.$event.$off([event, callback]); 來實現。該方法如果沒有提供參數，則移除所有的事件監聽器；如果只提供事件，則移除該事件所有的監聽器；如果同時提供了事件與回調，則只移除這個回調的監聽器。