eventBus实现vue兄弟组件通讯

eventBus原理是创建一个空Vue实例, 然后在上面挂载通讯事件, 在响应事件时, 可以认为这个Vue实例(组件), 是所有组件的父组件, 在触发事件时, 可以认为这个Vue实例, 是所有组件的子组件. 实现兄弟组件通讯一共分以下四步

1.创建eventBus.js的代码来实现一个空的Vue实例.
import Vue from “vue”;
let bus = new Vue();
export default bus;

2.在触发事件和响应事件的兄弟组件上都导入eventBus.js,把触发事件和响应事件都挂载在eventBus.js创建的空Vue对象上
import Bus from “…/utils/eventBus.js”;

3.使用Bus.$emit（“响应函数名称”，所带参数）来挂载触发事件
例如：Bus. $emit(“changeColor”, this.color);

4.使用Bus.$on(“响应函数名称”，响应函数体)来挂载响应事件，注意响应事件一般挂载在mounted（）里面，以便组件一生成就有响应事件

mounted(){
Bus.$on(“changeColor”, (color) => {
this.bgC = color;
});
},
这样就实现了兄弟组件通讯