Case 1:
1、新建event.js文件，初始化
// event-bus.js
importVuefrom 'vue'
exportconstEventBus = newVue()
2、在发送以及接收的组件中都引入此 event.js
import {
EventBus
}from "../event-bus.js";
3、发送组件加入代码
EventBus.$emit("hello", this.number);
4、接收组件加入代码
EventBus.$on("hello", (number) = > {
console.log(number)
});
Case 2:
直接在项目中的main.js初始化EventBus,具体发送、接收，同上Case1
// main.js
Vue.prototype.$EventBus = new Vue()
Case3:
解释说明：中央事件总线bus，其作为一个简单的组件传递事件，用于解决跨级和兄弟组件通信的问题，将其封装为一个Vue的插件，那么就可以在组件之间使用，而不需要导入bus
1、新建目录vue-bus，在目录里新建vue-bus.js文件，具体代码如下：
//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;
注：emit(event,...args)中的...args是函数参数的解构，因为不知道组件会传递多少个参数进来，使用...args可以把当前参数到最后的参数全部获取到。
2、在main.js中使用插件：
//main.js
import VueBus from './vue-bus/vue-bus'；
Vue.use(VueBus)；
3、发送组件加入代码
this.$bus.emit('hello',this.number,this.number2);
4、接收组件加入代码
this.$bus.on('hello', (number, number2) = > {
console.log(number)
console.log(number2)
})
综上所述，对于Case3的方式，通过插件的形式使用后，所有的组件都可以直接使用$bus，不需要每一个组件都导入bus组件。
有两点需要注意：
1、$bus.on应该在created钩子内使用，如果在mounted使用，有可能接收不到其他组件来自created钩子内发出的事件。
2、使用了$bus.on，在beforeDestroy钩子里应该再使用$bus.off解除，因为组件销毁后，没有必要把监听句柄存储在vue-bus里了。
beforeDestroy() {
this.$bus.off('hello', something);
}
