Vue——全局事件总线

在 Vue.js 中，事件总线(Event Bus)是一种非父子组件间通信的方法。它实际上使用了 Vue 的实例作为中央事件系统：任何组件都可以访问这个中央事件系统，以便在其他组件触发或响应某些事件。

现在我们开始学习和使用 Vue 中的事件总线：

1. 理解事件总线的概念：事件总线可以视为一个全局的事件监听器：一个组件可以通过它来广播(emit)事件，其他组件则可以通过它来监听(on)这些事件。

2. 创建一个事件总线：在主要的 Vue 实例（通常在 main.js 或者 index.js 文件中）创建一个新的 Vue 实例来作为事件总线。

   Vue.prototype.$bus = new Vue();
   

   这样，你就可以在任何组件中使用 this.$bus 来访问事件总线。

3. 在组件中广播事件：在一个组件中，你可以使用 this.$bus.$emit 来发送事件，这个事件可以是任何你定义的事件。

   // some-component.vue
   methods: {
     buttonClicked: function() {
       this.$bus.$emit('button-clicked', 'Some Payload');
     }
   }
   

4. 在组件中监听事件：在另一个组件中，你可以使用 this.$bus.$on 来监听在事件总线上广播的事件。

   // another-component.vue
   created() {
     this.$bus.$on('button-clicked', (payload) => {
       console.log('Button Clicked: ', payload);
     });
   }
   

5. 清理监听器：为了避免内存泄漏，当组件销毁的时候，你应该清理掉所有的事件监听器。你可以在 beforeDestroy 或 destroyed 生命周期钩子中使用 this.$bus.$off 来做这个事情。

   // another-component.vue
   beforeDestroy() {
     this.$bus.$off('button-clicked');
   }
   

总结：事件总线是一种非常灵活的通信方式，可以帮助你解决许多复杂的组件间通信问题。