Options API 怎么使用 $emit 和 $on（Vue 2 事件总线）进行非父子组件通信-Vue.js-PHP中文网

vue 2 中非父子组件通信需借助共享的事件总线（event bus），即一个不挂载的 vue 实例，发送方用 $emit 发布事件，接收方用 $on 监听并在 beforedestroy 中用 $off 清除监听以防内存泄漏。

options api 怎么使用 $emit 和 $on（vue 2 事件总线）进行非父子组件通信

在 Vue 2 的 Options API 中，$emit 和 $on 本身是实例方法，但它们**不能直接跨组件调用**——因为每个组件的实例彼此隔离。要实现非父子组件通信，必须借助一个**共享的 Vue 实例作为事件总线（Event Bus）**，它充当“中转站”，让任意组件都能向它发事件、从它收事件。

创建全局事件总线

新建一个文件（如 src/utils/EventBus.js），导出一个空的 Vue 实例：

import Vue from 'vue'
export default new Vue()

这个实例不挂载到 DOM，只负责事件的触发与监听，所有组件都能导入并使用它。

发送方组件：用 `$emit` 发布消息

在需要传出数据的组件（比如 Button.vue）中：

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

导入 EventBus：import EventBus from '@/utils/EventBus'
在 methods 中调用 EventBus.$emit(事件名, 数据)
推荐在用户交互（如点击）时触发，避免在 created/mounted 中误发

示例：

methods: {
  handleClick() {
    EventBus.$emit('update-user-info', { name: '张三', age: 28 })
  }
}

接收方组件：用 `$on` 监听消息

在需要接收数据的组件（比如 Profile.vue）中：

同样导入 EventBus
在 created 或 mounted 钩子中调用 EventBus.$on(事件名, 回调)
务必在 beforeDestroy 中调用 $off 清除监听，防止内存泄漏

示例：

created() {
  EventBus.$on('update-user-info', (payload) => {
    this.userInfo = payload
  })
},
beforeDestroy() {
  EventBus.$off('update-user-info')
}