如何通过EventBus在Vue子组件间传递v-model绑定的数据

没问题，我来帮你搞定这个Vue子组件间用EventBus传值的事儿！你已经在main.js里搭好EventBus的基础架子了，接下来只需要在发送数据的组件里触发事件，在接收数据的组件里监听事件就行，具体实现步骤如下：

1. 完善第一个子组件（发送数据端） #

你只需要给submit方法加上EventBus的触发逻辑，把v-model绑定的message传递出去就行：

<template>
  <div>
    <input type="text" v-model="message" />
    <button type="button" @click="submit">Submit</button>
  </div>
</template>

<script>
import { Bus } from './../main.js';

export default {
  data() {
    return {
      message: '' // 初始化v-model绑定的数据
    }
  },
  methods: {
    submit() {
      // 通过EventBus触发自定义事件，携带message数据
      // 这里的`message-updated`是自定义事件名，你可以按需修改，只要和接收端一致就行
      Bus.$emit('message-updated', this.message);
      
      // 可选：提交后清空输入框，提升用户体验
      this.message = '';
    }
  }
}
</script>

2. 接收数据的第二个子组件 #

在这个组件里，我们需要在生命周期钩子中监听EventBus的事件，拿到传递过来的数据，同时要记得在组件销毁时移除监听，避免内存泄漏：

<template>
  <div>
    <p>从其他组件收到的消息：{{ receivedMessage }}</p>
  </div>
</template>

<script>
import { Bus } from './../main.js';

export default {
  data() {
    return {
      receivedMessage: ''
    }
  },
  created() {
    // 监听EventBus上的`message-updated`事件，接收传递过来的数据
    this.busListener = Bus.$on('message-updated', (msg) => {
      this.receivedMessage = msg;
    });
  },
  beforeDestroy() {
    // 组件销毁前移除监听，防止内存泄漏
    Bus.$off('message-updated', this.busListener);
  }
}
</script>

关键注意点 #

• 事件名要完全一致：发送端的$emit事件名和接收端的$on事件名必须一模一样，不然接收不到数据
• 记得移除监听：如果不执行$off，组件销毁后监听仍会存在，可能导致重复触发或内存浪费
• 这个方案适用于Vue2，如果你用的是Vue3，EventBus的实现方式会略有不同（推荐用mitt库代替）

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