前言:

一提到兄弟组件通信,可能最先想到的解决方案是: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)
​ }

Logo

前往低代码交流专区

更多推荐