Vue组件间的通信
父 => 子,子 => 父,都可以通过简单的props实现传参,兄弟组件间以及其他任意组件间的通信除了使用vuex、storage,还可以使用全局事件总线。
全局事件总线
全局事件总线,相当于一个中间人,任何组件间想要实现通信,都可以通过全局事件总线,一般定义为$bus。作为数据的接收者组件,只要在$bus身上绑定自定义事件,并将回调函数留在接收者组件自身;在数据的提供者组件中通过触发绑定在$bus上的自定义事件,同时携带参数,就可以实现两个组件间的通信
注册全局事件总线
前提条件
- 保证所有组件都能看得见,即所有组件都能调用到这个全局事件总线
- 能够调用$on、$emit、、$off 方法
注册
main.js 文件
new Vue({
beforeCreated(){
// 在Vue的原型对象上注册全局事件总线 $bus,保证所有组件都能够调用到
// $bus是Vue实例对象
Vue.prototype.$bus = this
}
})
使用
- 接收数据
在接收数据的组件中给 $bus 绑定事件
// 一般在页面挂载完成以后绑定事件
mounted(){
/*
* 事件回调函数必须为箭头函数 --- this的指向问题
* 箭头函数是没有自己的this,向外找this是mounted的this,
* Vue中的所有生命周期钩子函数的this都是当前组件实例对象
*/
this.$bus.$on('自定义事件名', 事件回调函数(接收的数据) => {
...
})
}
- 提供数据
// 通过用户操作或者某个生命周期钩子函数触发自定义事件
this.$bus.$emit('自定义事件名', 要传递的数据)
注意事项
最好在beforeDestroy生命周期钩子中,用 $off 解绑当前组件所用到的自定义事件。