Vue CLI：全局事件总线（任意组件间通信）

什么是全局事件总线？

在 Vue 中，可以通过创建一个空的 Vue 实例作为事件总线，然后在需要通信的组件中通过该实例的 $emit 方法触发事件，在另一个组件中通过该实例的 $on 方法监听事件来实现组件间通信。

如何使用全局事件总线？

main.js 中安装全局事件总线 

// 创建vue实例对象
new Vue({
  el:"#root",
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this//安装全局事件总线
  }
})

这里创建了一个名为 eventBus 的空 Vue 实例，并将其挂载到了 Vue 的原型上，这样在任何地方都可以通过 this.$bus 访问到该实例。

然后，在需要通信的组件中，可以通过 this.$bus.$emit 方法触发事件，并传递需要传递的数据。

methods: {
    handleClick() {
        this.$bus.$emit('event-name', data)
    }
}

这里通过 this.$bus.$emit 方法触发了一个名为 'event-name' 的事件，并传递了一个名为 data 的数据。

最后，在另一个组件中，可以通过 this.$bus.$on 方法监听该事件，并在回调函数中处理数据。

created() {
    this.$bus.$on('event-name', (data) => {
        // 处理数据
    })
}

这里通过 this.$bus.$on 方法监听了名为 'event-name' 的事件，并在回调函数中获取了传递的数据。需要注意的是，要在组件销毁时使用 this.$bus.$off 方法取消监听，以避免内存泄漏。

全局事件总线的优缺点

全局事件总线的优点在于使用简单，不需要在组件之间传递 props 或使用 Vuex 等状态管理库，可以快速地实现组件之间的通信。而缺点在于事件名称可能会重复，导致事件被误触发，需要避免使用过于简单的事件名称。此外，由于事件总线是全局的，因此在大型项目中可能会导致事件监听器过多，影响性能。

总结

全局事件总线是一种简单而常用的组件间通信方式，可以在 Vue 中快速地实现任意组件之间的通信。在实际项目中，需要根据具体情况来选择合适的通信方式，以达到更好的代码结构和性能。

谁接收 谁绑定$bus.$on

谁传递，谁 $bug.$emit