Vue.js 2中如何通过事件总线在自定义事件中传递数据？

嗨，这个问题其实很好解决，Vue的$emit方法本身就支持在事件名称后面传递任意数量的参数，包括你需要的对象。结合你现有的代码，只需要做两处小修改：

1. 触发事件时传递对象 #

在你触发actionCompleted事件的组件里，把要传递的对象作为第二个参数传给$emit就可以了。比如你可以先定义好要传递的业务数据对象，再一起发送：

// 触发事件的组件代码
const completedInfo = {
  taskId: 'task_001',
  result: 'success',
  detail: '用户信息更新完成'
};
this.$eventBus.$emit('actionCompleted', completedInfo);

2. 监听事件时接收并使用对象 #

在监听事件的组件里，只需要给你的myMethod方法添加参数，用来接收传递过来的对象。同时要注意，在组件销毁时移除事件监听，避免内存泄漏：

export default {
  created: function () {
    // 直接把回调指向myMethod，它会自动接收传递的参数
    this.$eventBus.$on('actionCompleted', this.myMethod);
  },
  methods: {
    // 这里的completedInfo就是触发事件时传递的对象
    myMethod (completedInfo) {
      console.log('myMethod called');
      // 你可以直接访问对象里的属性
      console.log('任务ID:', completedInfo.taskId);
      console.log('操作结果:', completedInfo.result);
    }
  },
  // 组件销毁前移除监听，防止内存泄漏
  beforeDestroy() {
    this.$eventBus.$off('actionCompleted', this.myMethod);
  }
}

如果需要传递多个参数（比如一个对象加一个字符串），也可以直接在$emit后面追加：

this.$eventBus.$emit('actionCompleted', completedInfo, '额外提示信息');

对应的监听方法也要调整参数数量：

myMethod (completedInfo, extraMsg) {
  console.log(extraMsg); // 输出"额外提示信息"
}

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