1、作用:
全局事件总线是一种组件间通信的方式,并不是插件,适用于任意组件间通信、实现组件间的通信。
让所有的组件都能访问得到全局事件总线,那么创建的思路就是,全局事件总线一定要让VC或者VM访问得到。
结合组件的内置关系:VueComponent.prototype.proto === Vue.prototype
这个关系在作用就在于可以让组件实例对象:vc可以访问到Vue原型上的属性和方法
2、用法:
2.1 安装全局事件总线:
想要实现全局事件总线,就要安装全局事件总线,在main.js
中完成全局事件总线的安装配置。
配置如下:
//创建vm
new Vue({
el:'#app',
render: h => h(App),
// beforeCreate中模板未解析,且this是vm
beforeCreate(){
Vue.prototype.$bus = this //安装全局事件总线
}
})
2.2 定义事件的绑定
想要接收到数据的组件,进行自定义事件的绑定,简单来说就是,谁要接收数据,自定义事件就绑定在谁身上。
mounted(){
// 绑定自定义事件
this.$bus.$on('自定义事件名', (接收参数)=>{
console.log('我是TestB组件,收到了数据', 接收参数);
})
}
2.3 全局事件总线的触发
事件的触发是在发送数据的组件中完成的,简单来说,谁是数据的发送者,谁就来触发事件
methods:{
// 触发事件,事件名不能重复
触发事件方法名(){
this.$bus.$emit('自定义事件名', 传递参数);
}
},
2.4 解绑事件,提高性能
// 销毁对应自定义事件
beforeDestroy(){
this.$bus.$off('自定义事件名')
}
3、注意事项:
全局事件总线之所以叫全局,是因为任何组件都可以访问,这就导致如果大量组件都绑定了全局事件总线,难免会造成代码混乱,且自定义事件名可能发生重复的问题,所以在开发中,使用全局事件总线时要根据实际业务情况进行选择.