vue-bus插件的实现

vue-bus又叫中央事件总线，是vue中实现跨级组件和兄弟组件之间通信的方式。它的原理是额外定义一个vue的实例，所有的事件监听和触发都是通过这个函数进行的。

什么是插件

Vue提供了插件机制，让我们可以在全局添加一些功能。它可以只是提供几个简单的方法或熟悉，也可以是复杂的组件库。

往Vue中注册插件需要提供一个install方法，如下实例所示：

MyPlugin.install = function(Vue, options) {
    Vue.component('comp-name', {
        // 组件内容
    })
    // 往Vue实例添加方法
    Vue.prototype.xx = function() {
        // 方法内容
    };
    ...
};

接着通过Vue.use方法来使用插件

Vue.use(MyPlugins, {
    // 可以传一些参数
})

vue-bus

它会给vue实例添加$bus属性，让用户可以调用它所提供的on、emit等方法去注册和触发事件。示例代码如下：

// vue-bus.js

const install = function(Vue) {
    const bus = new Vue({
        methods: {
            emit(event, ...args) {
                this.$emit(event, ...args);
            },
            on(event, handler) {
                this.$on(event, handler);
            },
            off(event, handler) {
                this.$off(event, handler);
            },
            once(event, handler) {
                this.$once(event, handler);
            }
        }
    });
    Vue.prototype.$bus = bus;
};
if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(install);
}
export default install;

在页面中使用插件：

// main.js

import VueBus from './vue-bus';
Vue.use(VueBus);