Vue.JS中使用EventBus传递对象时$on监听无响应如何处理

问题根因 #

你$emit的用法存在错误，这是最直接的触发无效原因。
Vue实例的$emit方法参数规则为：第一个参数是自定义事件名，后续所有参数都是要传递给监听回调的实际数据，不需要在此处传入回调函数。你当前的代码里，EventBus.$emit('likedQuestion', (question) => {console.log(question)}) 相当于给监听方传递了一个箭头函数，根本没把likeQuestion方法接收到的question参数实际传出去，B组件的监听回调自然拿不到预期值，也不会触发对应的日志输出。

修正方案 #

1. 先修改A组件的事件触发逻辑，直接把要传递的question对象作为$emit的第二个参数传入即可：

likeQuestion(question) {
  // 直接传入要发送的数据，不需要额外包装函数
  EventBus.$emit('likedQuestion', question)
}

2. 排查其他潜在问题

• 确认两个文件中EventBus的导入路径匹配实际项目结构，你当前写的import EventBus from 'components/event-bus.js'要保证相对路径和当前文件位置对应，也可以改为@/components/event-bus.js（如果项目配置了@指向src根目录）
• 确认事件触发时机在B组件mounted钩子执行之后：如果A组件先触发事件、B组件还未完成渲染注册监听，会出现事件丢失的情况。如果需要支持先触发、后监听也能收到数据，可以改造为带缓存的EventBus，或者切换为Vuex/Pinia等状态管理方案
• 补充销毁时的解绑逻辑，避免内存泄漏和重复监听问题：

beforeDestroy () {
  EventBus.$off('likedQuestion')
}

内容的提问来源于stack exchange，提问作者Kali