Vue 事件总线进行数据通讯

1、在main.js里加上

new Vue({
    render: h => h(App),
    //事件总线
    beforeCreate() {
        Vue.prototype.$bus = this
    }
}).$mount('#app')

2、

发送事件

在发送事件的组件中，你可以使用this.$emit方法触发一个事件，并传递所需的参数

// ComponentA.vue
<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>

export default {
  methods: {
    sendMessage() {
      this.$bus.$emit('messageSent', { text: '你好，世界！' });
    }
  }
};
</script>

3、在需要接收事件的组件中，使用this.x.$on方法监听事件，并定义响应的处理函数：

// ComponentB.vue
<template>
  <div>{{ message }}</div>
</template>

<script>


export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    // 监听messageSent事件
   this.$bus.$on('messageSent', (data) => {
      this.message = data.text;
    });
  },
  beforeDestroy() {
    // 组件销毁时移除事件监听，防止内存泄漏
   this.$bus.$off('messageSent');
  }
};
</script>