全局事件总线

作用

在自定义事件一文中提到，组件之间的通信有多种方式，事件总线也是其中之一。它是在自定义事件的基础上，设计出来的一种结构。

如果有一个对象能被所有的vue组件实例所看见，且能能够调用$on、$emit、$off、等事件操作方法，那么就能够实现任意组件之间的通信。

实现：任何组件之间的通信

安装与使用

安装

在创建vue实例的main.js文件中，

new Vue({
	.....
	beforeCreate(){
		// 安装全局事件总线  在Vue的原型对象上放一个 $bus 属性且值对象为vue实例对象
  	// 这样一来每个VueComponent都包含一个 $bus 
		Vue.prototype.$bus = this 
	}
})

使用

组件A如果想接收数据，则在A组件中给$bus绑定自定义事件

methods(){
  demo(){
    .......
  }
}
mounted(){
  this.$bus.$on('handleMyEvent'，this.demo)
}

其他组件如果需要传递数据，则只需要触发该自定义事件即可

methods(){
  handEvent(data..){
    this.$bus.$emit('handleMyEvent',data)
  }
}

注意

使用全局事件总线可以在应用程序的任何地方发布和接收事件，这使得在Vue应用程序中实现跨组件通信变得非常容易。但是，过度使用全局事件总线可能会导致代码难以管理和理解，因此建议在适当的情况下使用。