兄弟组件通信方式
前言:一提到兄弟组件通信,可能最先想到的解决方案是:vuex,同一个父组件,向子组件传值等等但是有没有想过,在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex;而随着应用程序越来越庞大,通过父组件来传递所有内容会把事情变得越来越棘手。不过我们还有另一种选择,创建一个事件总线,使用Event Bus实现兄弟组件通信EventBus兄弟组
前言:
一提到兄弟组件通信,可能最先想到的解决方案是: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)
}
}
更多推荐
所有评论(0)