vue事件总线eventbus事件

### 使用事件总线（EventBus）实现 Vue.js 组件间通信

在 Vue.js 中，通过创建一个独立的 `Vue` 实例作为中央事件中心——即所谓的 **事件总线** （EventBus），可以让任意组件之间相互通信。这特别适用于非父子关系的兄弟组件之间的消息传递。

#### 创建事件总线实例

为了使整个应用程序都能访问到这个共享的消息通道，在项目根目录下建立一个新的 JavaScript 文件用于定义并暴露该单例对象：

// src/event-bus.js
import Vue from 'vue';
export default new Vue();

此代码片段展示了如何在一个名为 `event-bus.js` 的文件中创建了一个新的 `Vue` 实例，并将其默认导出以便于后续导入使用[^1]。

#### 发送消息给其他组件

当某个特定条件满足时，源组件可以通过调用 `$emit()` 方法向 Event Bus 上发布自定义事件名及其携带的数据包：

// src/components/SenderComponent.vue
<template>
  <!-- ... -->
</template>

<script>
import EventBus from '../event-bus';

export default {
  name: "SenderComponent",
  
  methods: {
    triggerMessageSending() {
      const payload = { text: "Hello, world!" };
      
      // 向所有订阅者广播消息
      EventBus.$emit('message-sent', payload);
    }
  }
}
</script>

上述例子中的 `triggerMessageSending` 函数会在适当时候被触发，从而发送一条带有字符串内容的对象至指定名称为 `'message-sent'` 的频道上[^2]。

#### 订阅来自其他组件的消息

目标接收方则需提前注册好相应的监听器来捕捉这些信号；一旦检测到匹配类型的活动发生，则立即执行回调函数处理接收到的信息：

// src/components/ReceiverComponent.vue
<template>
  <div>{{ receivedText }}</div>
</template>

<script>
import EventBus from '../event-bus';

export default {
  data () {
    return {
      receivedText: ''
    }
  },
  
  mounted() {
    // 注册监听器等待消息到来
    EventBus.$on('message-sent', ({text}) => {
      this.receivedText = text;
    });
    
    // 移除监听防止内存泄漏
    this.$once('hook:beforeDestroy', () => {
      EventBus.$off('message-sent');
    })
  }
};
</script>

在这个示例里，每当有新数据到达时都会更新视图上的显示文字。同时注意到了生命周期钩子的应用以确保及时清理不再使用的侦听器，避免潜在的记忆泄露风险[^3]。