Vue封装中央事件总线插件vue-bus

1.第一步：新建vue-bus文件夹，在该文件下新建index.js

/*
封装一个中央事件总插件vue-bus，可以在任意组件间使用，而不需要导入bus
给Vue添加一个属性$bus，并代理$emit, $on, $off三个方法
*/

const install = function(Vue) {
    const Bus = new Vue({
        methods: {
            emit (event, ...args) {
                this.$emit(event, ...args);
            },
            on (event, callback) {
                this.$on(event, callback);
            },
            off (event, callback) {
                this.$off(event, callback);
            },
        }
    })

    Vue.prototype.$bus = Bus;
}

export default install;

2.第二步：

在main.js中使用：

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

3.第三步就可以在组件中使用了：

backtoHome() {
        this.$bus.emit('overfl-visi',this.overflVisible);
        this.$router.push('/home');
    }
    

created () {
            this.$bus.on('overfl-visi', this.changeOverflow);
}

beforeDestroy () {
            this.$bus.off('overfl-visi', this.changeOverflow);    
        }

使用vue-bus有两点需要注意：

第一是$bus.on应该再created钩子内使用，如果在mounted使用，它可能接收不到其他组件来自created钩子内发出的事件
第二是使用了$bus.on，在beforeDestroy钩子里应该使用$bus.off解除。因为组件销毁后，就没必要把监听的句柄储存在vue-bus里了。