全局事件总线是解决组件间传递数据的一个好方法,与使用 props 传参、自定义事件传参的方法相比,全局事件不需要通过两组件的中间组件传递数据,可以直接一步到位实现任意两组件间的数据传递。
实现原理:
原理还是通过一个中间件进行传递,不同的是这个中间件可以直接访问到所有的组件实例对象,不需要通过层级关系。这里需要用到一个重要的内置关系,即:
VueComponent.prototype.__proto__ === Vue.prototype
即 VueCompnent 的原型对象的原型 与 Vue 的原型对象指向同一个对象,所以 VueComponent 的实例对象可以访问到 Vue 原型上的属性和方法。
所以可以想到可以利用 Vue 的实例化对象作为这个中间件。
new Vue({
el: '#app',
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this; // bus 总线
}
})
我们可以在 Vue 实例将要创建的时候在 Vue 的原型上添加该实例对象本身,取名 $bus (总线)。这样一来,所有 VueComponent 实例对象都可以通过原型链访问到总线,从而可以进行数据传递。
具体做法:
首先在需要接收数据的组件上给总线绑定自定义事件,再在需要传递数据的组件上触发总线上的该自定义事件。注意绑定事件时若不在 methods 中编写函数,需要将函数体写成箭头函数,否则 this 的指向会出问题。
// 给总线绑定事件 在接收数据的组件上编写
this.$bus.$on('baci',(data)=>{
console.log('get',data);
})
//触发总线的事件 在传递数据的组件上编写
sendname(){
this.$bus.$emit('baci',this.name);
}
最好在销毁某组件时,将其绑定在总线上的自定义事件同时销毁。
在接收数据的组件上编写
beforeDestroy(){
this.$bus.$off('baci');
}