Vue开发中的中央事件总线

　　在Vue开发中会遇到大量的组件之间共享数据的情形，针对不一样的情形，Vue有相对应的解决方案。好比，父组件向子组件传值能够使用props，复杂项目中不一样模块之间传值能够使用Vuex。可是，对于一些简单的项目里的非父子组件来讲，它们一方面不适用props，另外一方面又没有必要使用Vuex，针对这种情形能够使用中央事件总线（Event Bus）来解决问题。

一、建立中央事件总线

能够使用多种形式建立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;

二、使用中央事件总线传值

先在组件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传递的值
        // });      
    }
}

三、单次接收事件或者移除事件Listeners

若是你只想监听一次该事件。能够使用 this.$event.$once(channel: string, callback(payload1, payload2, ...))，事件触发一次后将移除事件。

若是你想移除自定义事件监听器，你能够使用  this.$event.$off([event, callback]); 来实现。该方法若是没有提供参数，则移除全部的事件监听器；若是只提供事件，则移除该事件全部的监听器；若是同时提供了事件与回调，则只移除这个回调的监听器。