1.为什么要有事件总线
在vue中非常常见的有父子组件通信和兄弟组件通信,而兄弟组件的通信就需要用到了事件总线(EventBus),将总线作为一个中间的桥梁进行通信
2.EventBus的使用步骤
因为在Vue实例的原型链上有着$emit,$on这些方法,所有我们可以借助Vue的实例作为通信的中间桥梁
a. 创建一个Vue的实例对象(new Vue()),并绑定到Vue的原型链上,这样在任意组件中都可以调用
b.在数据发送方,调用$emit('事件名称',要发送的数据)方法触发自定义事件
c.在数据接收方,调用$on("事件名称",事件处理函数)方法注册一个自定义事件
// 在Vue原型链上绑定一个$bus的事件总线
Vue.prototype.$bus = new Vue();
数据发送方
// 以在Vue组件中为例
export default{
data(){
return{
msg: "hello,vue.js"
}
},
methods: {
// 在方法中发送数据
sendMsg(){
this.$bus.$emit("share",this.msg);
}
}
}
数据接收方:
export default{
data(){
return {
msgFrom: ""
}
},
created(){
// 回调函数也可以抽出来写成一个方法在methods 里面
this.$bus.$on("share",val => {
this.msgFrom = val
})
},
}
移除绑定的事件
export default{
data(){
return {
msgFrom: ""
}
},
created(){
// 这里把回调函数放在methods里面
this.$bus.$on("share",this.myShare)
},
methods: {
myShare(val){
this.msgFrom = val;
}
},
destroyed(){
this.$bus.$off("share"); // 移除指定这个事件
this.$bus.$off(); // 移除所有事件
}
}