【Vue】全局事件总线

Vue全局事件总线是一种在Vue.js应用程序中进行组件间通信的机制。它允许不同的组件在没有明确的父子关系的情况下进行通信，以便共享数据、触发事件和相互通知。

要使用Vue全局事件总线，首先需要创建一个Vue实例并将其作为事件总线来使用。可以将该实例绑定到Vue的原型上，以便在整个应用程序中访问它。下面是一个示例：

// main.js
import Vue from 'vue'

// 创建事件总线实例
export const eventBus = new Vue()

// 将事件总线实例绑定到Vue原型上
Vue.prototype.$bus = eventBus

//其他写法
//new Vue({
//	el:'#app',
//	render: h => h(App),
//	beforeCreate() {
//		Vue.prototype.$bus = this //安装全局事件总线
//	}
//})

上述示例创建了一个Vue实例eventBus，并将其导出。然后，通过将其绑定到Vue的原型上，使得在任何组件中都可以通过this.$bus访问该实例。

现在，在需要进行组件间通信的地方，都可以使用事件总线进行发布和订阅事件。例如，在一个组件中触发一个事件：

// ComponentA.vue
methods: {
  handleClick() {
    this.$bus.$emit('custom-event', data)
  }
}

然后，在另一个组件中监听该事件：

// ComponentB.vue
created() {
  this.$bus.$on('custom-event', this.handleEvent)
},
methods: {
  handleEvent(data) {
    // 处理事件
  }
}

通过这种方式，ComponentA可以通过事件总线发布一个名为custom-event的事件，并传递相应的数据。而ComponentB可以通过事件总线监听该事件，并在事件发生时执行相应的处理逻辑。

需要注意的是，当不再需要事件总线时，应该将其销毁，以避免潜在的内存泄漏。在Vue实例销毁的生命周期钩子中，可以调用$off方法来解绑所有事件监听器：

// ComponentB.vue
beforeDestroy() {
  this.$bus.$off()
}

这样就能确保在组件销毁时，所有的事件监听器都被正确移除。

上述就是使用Vue全局事件总线进行组件间通信的基本过程。通过使用事件总线，我们可以在Vue应用程序中方便地实现组件之间的通信和协作。