兄弟组件通信方式

前言：

一提到兄弟组件通信,可能最先想到的解决方案是:vuex,同一个父组件,向子组件传值等等

但是有没有想过,在大型项目中

我们可以通过引入vuex轻松管理各组件之间通信问题，

但在一些小型的项目中，我们就没有必要去引入vuex;

而随着应用程序越来越庞大，通过父组件来传递所有内容会把事情变得越来越棘手。

不过我们还有另一种选择，创建一个事件总线，使用Event Bus实现兄弟组件通信

---

EventBus兄弟组件通信：

---

新建一个js文件:abc.js
import Vue from ‘vue’;
export default new Vue

---

在需要传值的组件里
import eventBus from ‘./abc’;
export default {
data(){
return{
ddv:”数据”
}
},
methods:{
add(){
eventBus.$emit(‘fun’,this.ddv)
}
}
}

---

在需要使用兄弟组件里使用

import eventBus from ‘./abc’;
export default {
data(){
return{

​ }
​ },
​ methods:{
​ yyds(da){
​ console.log( “收到数据：”,da)
​ }
​ },
​ mounted(){
​ //监听如果发生该事件，执行yyds函数
​ eventBus.$on(‘fun’,this.yyds)
​ },
​ beforeDestroy(){
​ //解绑
​ eventBus.$off(‘fun’,this.yyds)
​ }

｝