Vue全局事件总线
把全局事件总线放在Vue的原型对象vue.prototype
上,组件间相互通信通过这个中间介质,完成数据的传递和接收
安装事件总线
在main.js
中完成全局事件总线的安装配置
/创建vm
new Vue({
el:'#app',
render: h => h(App),
// beforeCreate中模板未解析,且this是vm
beforeCreate(){
Vue.prototype.$bus = this //安装全局事件总线
}
})
自定义事件的绑定
谁要接收数据,自定义事件就绑定在谁身上
mounted(){
// 绑定自定义事件
this.$bus.$on('自定义事件名', (接收参数)=>{
console.log('我是TestB组件,收到了数据', 接收参数);
})
},
beforeDestroy() {
// 解除自定义事件绑定
this.$bus.$off('自定义事件名')
}
触发事件
谁是数据的发送者,谁就来触发事件
methods:{
// 触发事件,事件名不能重复
触发事件方法名(){
this.$bus.$emit('自定义事件名', 传递参数);
}
}