在实际项目开发中，有时会遇到组件B需要监听兄弟组件A的数据是否有改动，并根据兄弟组件A的改动来更新自身数据或执行一定操作的需求。下面将介绍实现这一过程的方法：
在Vue项目的
main.js中 添加下面语句：1
Vue.prototype.$eventBus = new Vue()
在兄弟组件A中所要监听的事件中添加如下自定义事件的代码
this.$eventBus.$emit('SyncData')。如需要监听addDataA事件的变化，则组件A中script模块的代码如下所示：1
2
3
4
5
6
7
8
9
10
11
12methods: {
addDataA() {//函数内容可自行替换
axios.post('testA')
.then((res) => {
console.log(res.data)
this.$eventBus.$emit('SyncData')//SyncData为自定义事件名，可修改
})
.catch((err) => {
console.log(err)
})
}
}在需要实时更新的组件B中添加监听方法的变化，就可以实现实时更新数据。在组件B的
script模块中添加以下代码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16mounted(){
this.$eventBus.$on("SyncData",()=>{//监听自定义事件是否被触发
this.onLoadDataB()//自定义事件被触发时执行该函数
})
},
methods: {
onLoadDataB() {//函数内容可自行替换
axios.get('testB')
.then((res) => {
console.log(res.data)
})
.catch((err) => {
console.log(err)
})
}
}为防止叠加调用
EventBus，在组件B的beforDestroy生命钩子中，添加以下代码：1
2
3beforDestroy(){
this.$eventBus.$off("SyncData"); //当这个组件销毁的时候bus也跟着一起销毁
}至此，当兄弟组件A触发
addDataA事件添加数据时，组件B便会触发事件onLoadDataB来加载数据。从而达到组件B随着兄弟组件A数据变化进行实时更新的目的。
补充：
使用EventBus的好处在于：
- 可全局使用
- 灵活性高，哪里需要放哪里，代码量少
- 跨组件通信，无需使用缓存
相较于vuex，使用EventBus的缺点有：
$EventBus.$emit和$eventBus.$on必须成对出现- 由于高灵活性，事件多了后，难以维护事件
- 在
$eventBus.$on的组件里必须手动销毁$eventBus，否则会引发多次执行 - 复用性较差，需要在多个地方重复写逻辑
综合优弊端分析可知：中大型项目不推荐用EventBus，建议用vuex做状态管理以便日后维护；若为小型项目，尤其是涉及多处跨组件通信时推荐使用EventBus