[JavaScript知识库]vue任意组件间通信：全局事件总线bus

Vue组件间的通信

父 => 子，子 => 父，都可以通过简单的props实现传参，兄弟组件间以及其他任意组件间的通信除了使用vuex、storage，还可以使用全局事件总线。

全局事件总线

全局事件总线，相当于一个中间人，任何组件间想要实现通信，都可以通过全局事件总线，一般定义为$bus。作为数据的接收者组件，只要在$bus身上绑定自定义事件，并将回调函数留在接收者组件自身；在数据的提供者组件中通过触发绑定在$bus上的自定义事件，同时携带参数，就可以实现两个组件间的通信

注册全局事件总线

前提条件

1. 保证所有组件都能看得见，即所有组件都能调用到这个全局事件总线
2. 能够调用$on、$emit、、$off 方法

注册

main.js 文件

new Vue({
	beforeCreated(){
		// 在Vue的原型对象上注册全局事件总线 $bus，保证所有组件都能够调用到
		// $bus是Vue实例对象
		Vue.prototype.$bus = this
	}
})

使用

1. 接收数据
   在接收数据的组件中给 $bus 绑定事件

// 一般在页面挂载完成以后绑定事件
mounted(){
	/*
	* 事件回调函数必须为箭头函数 --- this的指向问题
	* 箭头函数是没有自己的this，向外找this是mounted的this，
	* Vue中的所有生命周期钩子函数的this都是当前组件实例对象
	*/
	this.$bus.$on('自定义事件名', 事件回调函数(接收的数据) => {
		...
	})
}

2. 提供数据

// 通过用户操作或者某个生命周期钩子函数触发自定义事件
this.$bus.$emit('自定义事件名', 要传递的数据)

注意事项

最好在beforeDestroy生命周期钩子中，用 $off 解绑当前组件所用到的自定义事件。