Vue全局事件总线

Vue全局事件总线理解

---

---

什么是全局事件总线？

全局事件总线是一种组件间通信的方式，适用于任意组件通讯

全局事件总线不是插件，配置文件等等，事件总线是程序员在vue开发中总结的一套方法，是一套规则，只要满足这套规则就可以实现组件通讯。

原理

简单理解，全局事件总线其实就是一个中间介质，组件间的相互通信借助于这个中间介质，通过这个中间转换介质，从而完成数据的传递与接收，实现组件间的相互通信

一、满足所有组件都能访问得到全局事件总线

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

二、可以调用 $on ,和 $off 和 $emit

因为 $on ,和 $off 和 $emit 这三个方法在Vue原型对象上，所以，我们的全局事件总线就要放在Vue的原型对象（vue.prototype）上，以确保每个组件都能访问得到

实现

要想实现全局事件总线就得先安装全局事件总线
— 在main.js下面配置

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

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

绑定全局事件总线

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

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

触发全局事件总线

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

---

总结

全局事件总线实现了任意组件间的通信，有效简化了开发过程中一些数据传递的操作，同时也提高了程序的性能，但是值得注意的是，全局事件总线之所以叫全局，是因为任何组件都可以访问，这就导致如果大量组件都绑定了全局事件总线，难免会造成代码混乱，且自定义事件名可能发生重复的问题，所以在开发中，使用全局事件总线时要根据实际业务情况进行选择