实现一个简单的跨组件数据共享vue-bus

在开发小项目的时候，我们不希望引入vue的插件vuex，而仅仅使用简单的一个自定义的插件，来解决跨级和兄弟组件通信的问题。

在此，通过vue插件的方式，可以在全局的组件间随意使用；

// vue-bus.js 
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;

//main.js  注意文件引入路径
// 部分省略

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

通过使用 this.$bus.emit('add', this.params); 发出。第一个参数为事件名，第二参数为需要传递的数据；

通过使用 this.$bus.emit('add',this.handleData)接收。 第一个参数为事件名，第二个参数为一个callback的函数，该函数入参就是emit传递过来的参数；