vue 任意组件间通信-全局事件总线(GlobalEventBus)
全局事件总线(GlobalEventBus)
一种组件间通信的方式,适用于任意组件间通信
安装全局事件总线
main.js入口文件配置
new Vue({
......
beforeCreate() {
Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm
},
......
})
使用事件总线
1、接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身。
methods(){
getName(data){......}
}
......
mounted() {
this.$bus.$on('eventName',this.getName)
}
或者使用箭头函数回调,不用在methods
中另外写回调方法
mounted() {
this.$bus.$on('eventName',(params)=>{
//逻辑
})
}
2、提供数据,触发事件:
this.$bus.$emit('eventName',数据)
最好在beforeDestroy
钩子中,用$off去解绑当前组件所用到的事件。
使用解绑单个自定义事件的方式,不能使用$off()
这样解绑全部自定义事件了,把其它组件的都解绑了。
beforeDestroy() {
this.$bus.$off('enentName')
}
为什么要解绑呢?就放着不行吗?
因为$bus绑定了很多组件的自定义事件,如果不解绑,那其实这个是多余的事件,不合理了