描述:
全局事件总线是组件间通信的一种方式,适用于任意组件间通信
1.安装全局事件总线:
在main.js入口文件中完成全局事件总线的安装配置
new Vue({
el:'#app',
render: h => h(App),
beforeCreate(){
Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm
}
})
2.使用事件总线:
接收数据:B组件想接收A组件的数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身
// 我是B组件
mounted(){
// 绑定自定义事件
this.$bus.$on('自定义事件名', (接收参数)=>{
console.log('我是B组件,收到了数据', 接收参数);
})
}
B组件提供数据
// 我是A组件
methods:{
// 触发事件,事件名不能重复
触发事件方法名(){
this.$bus.$emit('自定义事件名', 传递参数);
}
},
3.最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件
// 我是B组件
mounted(){
// 绑定自定义事件
this.$bus.$on('自定义事件名', (接收参数)=>{
console.log('我是B组件,收到了数据', 接收参数);
})
},
beforeDestroy() {
this.$bus.$off('自定义事件名')
}