前言

什么是全局事件总线？

在Vue.js应用中，全局事件总线（Global Event Bus）是一种用于组件间通信的模式。它通过创建一个全局可访问的Vue实例作为事件中心，使得不同组件之间可以互相发送消息，而无需直接引用彼此。这种方式特别适用于那些没有父子关系的组件间的通信，或者是当组件层级非常深，直接传递属性变得复杂的时候。

通俗解释:

想象你在玩一个团队游戏，游戏中有好几个玩家，每个人都在不同的地方做不同的事情。：

小明的斧头坏了，需要帮助。但他不知道其他人在哪里。

这时，可以用一个“广播站”：

全局事件总线就像这个“广播站”，它的作用是：

发布消息：任何一个玩家（组件）可以通过它发布消息。接收消息：任何订阅了“大喇叭”的玩家（组件）都可以听到消息并作出响应。

这样，玩家之间不需要直接联系，只需要通过“大喇叭”就能相互沟通。这使得游戏中的合作更加简单，也更容易扩展更多的玩家和任务。

全局使用总线，全局通信组件传值适用场景？

全局事件总线适用于以下几种场景：

this.$root.$emit() 和 this.$bus.$emit() 区别

在Vue.js中，this.$root.$emit() 和 this.$bus.$emit() 都是用来触发事件的方法，但它们的工作方式和使用场景有所不同。

全局通信$root

this.$root.$emit('batchWait', val) //发起通信-案例
this.$root.$on('batchWait',this.handleOpen) //接收通信-案例
this.$root.$off('batchWait', this.handleOpen) //结束通信-案例

兄弟通信$bus

this.$bus.$emit('batchWait', val) //发起通信-案例
this.$bus.$on('batchWait',this.handleOpen) //接收通信-案例
this.$bus.$off('batchWait', this.handleOpen) //结束通信-案例

选择哪种方式取决于你的具体应用场景以及组件之间的关系。如果你的应用中有明确的层次结构并且需要跨越多层传递事件，可以考虑使用this.$root.$emit()。如果你的应用中有多个独立的组件需要通信，那么使用this.$bus.$emit()会更为合适。

全局事件总线通信$root：示例

案例中：需要当全局batchWait.vue组件全部执行完毕后去调用其他组件index.vue组件中的刷新页面列表方法；

在APP.vue全局中先引入一个全局公共组件：batchWait.vue。在全局batchWait.vue组件中通过this.root.root.root.emit("batchSuccess")发起全局通信。在其他index.vue组件中通过this.root.root.root.on("batchSuccess",this.batchSuccess)接收通信，并调用其他index.vue组件中的this.batchSuccess方法。调用其他index.vue组件执行刷新页面列表方法this.batchSuccess()。当index.vue组件即将销毁时，通过this.root.root.root.off('batchSuccess',this.batchSuccess)结束通信，避免关闭页面后仍旧触发。

代码截图如下:

源代码如下:

//全局组件A：batchWait.vue
this.$root.$emit("batchSuccess") //全局发起$emit 方法通信
//其他组件B：index.vue
methods：{ 
  batchSuccess(){ //执行需要执行的方法 
    console.log('刷新页面');
    this.voucherPeriodListFn() 
   }, 
},
mounted() { 
  console.log('接收通信0');
  this.$root.$on('batchSuccess',this.batchSuccess) //接收$emit并调用本页面的事件方法 
}, 
beforeMount(){ 
  console.log('结束通信');
  this.$root.$off('batchSuccess',this.batchSuccess) 
}

使用的具体方法

图一：

图二：

发起全局通信

this.$root.$emit("batchSuccess") //针对图一：发起通信-命名事件
或
this.$root.$emit('batchWait', val)//针对图二：发起通信-命名事件并传递val参数

接收全局通信

this.$root.$on('batchSuccess',this.batchSuccess)//针对图一：全局组件调用-其他组件方法
或
this.$root.$on('batchWait', this.handleOpen)//针对图二：该页面方法进行中时，刷新页面或者关闭弹窗仍能保持
batchSuccess(){ //针对图一：刷新列表方法
  this.voucherPeriodListFn()
},
handleOpen(data) { //针对图二：调用方法并接收val参数
  this.form = { ...data }
  localStorage.setItem('batchWaitForm', JSON.stringify(this.form))
  this.totalResult = null
  this.totalMsg = null
  this.resultList = []
  this.dialogVisible = true
  this.start()
},

结束全局通信：

this.$root.$off('batchSuccess',this.batchSuccess) //针对图一
或
this.$root.$off('batchWait', this.handleOpen)//针对图二

结尾

希望本文能帮助你更好地理解全局通信,并在实际项目中灵活应用全局通信。无论是前端应用中的状态同步、多用户协作编辑系统，还是分布式系统的实时数据更新，合理的全局通信策略都能为你提供一个高效的信息传递机制。Happy coding！

全局事件总线提供了一种灵活的方式来管理组件间的通信，尤其是在组件之间没有直接关系的情况下。然而，随着应用的增长，过多地依赖全局事件总线可能会导致难以追踪的消息传递路径，并且可能会使代码难以维护。因此，在使用全局事件总线时，应该考虑其适用范围，并结合其他通信方式如Vuex等来保持代码的整洁和可维护性。此外，对于更大型的应用程序，考虑使用状态管理模式（如Vuex）可能是更好的选择，因为它提供了集中管理和追踪状态变化的能力。