Vue全局事件总线简明笔记

1、作用：

全局事件总线是一种组件间通信的方式，并不是插件，适用于任意组件间通信、实现组件间的通信。

让所有的组件都能访问得到全局事件总线，那么创建的思路就是，全局事件总线一定要让VC或者VM访问得到。

结合组件的内置关系：VueComponent.prototype.proto === Vue.prototype
这个关系在作用就在于可以让组件实例对象:vc可以访问到Vue原型上的属性和方法

2、用法：

2.1 安装全局事件总线：

想要实现全局事件总线，就要安装全局事件总线，在main.js中完成全局事件总线的安装配置。
配置如下：

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	// beforeCreate中模板未解析，且this是vm
	beforeCreate(){
		Vue.prototype.$bus = this	//安装全局事件总线
	}
})

2.2 定义事件的绑定

想要接收到数据的组件,进行自定义事件的绑定，简单来说就是，谁要接收数据，自定义事件就绑定在谁身上。

mounted(){
  // 绑定自定义事件
  this.$bus.$on('自定义事件名', (接收参数)=>{
    console.log('我是TestB组件，收到了数据', 接收参数);
  })
}

2.3 全局事件总线的触发

事件的触发是在发送数据的组件中完成的，简单来说，谁是数据的发送者，谁就来触发事件

 methods:{
  // 触发事件,事件名不能重复
  触发事件方法名(){
    this.$bus.$emit('自定义事件名', 传递参数);
  }
},

2.4 解绑事件，提高性能

// 销毁对应自定义事件
beforeDestroy(){
  this.$bus.$off('自定义事件名')
}

3、注意事项：

全局事件总线之所以叫全局，是因为任何组件都可以访问，这就导致如果大量组件都绑定了全局事件总线，难免会造成代码混乱，且自定义事件名可能发生重复的问题，所以在开发中，使用全局事件总线时要根据实际业务情况进行选择.