Vue全局事件总线（中央事件总线）

兄弟组件A 兄弟组件B 效果如图

1.main.js 配置全局总线

new Vue({
  render: h => h(App),
  // 中央事件总线(全局事件总线)
  beforeCreate() {
    Vue.prototype.$bus = this // 配置全局事件总线 $bus , ****必须在页面挂载之前****
  }
}).$mount('#app')

2.搞清是谁给谁传，或者说谁要接收谁的数据。比如现在是 B > A 。也就是A要接收数据，所以去A里面绑定全局事件 Event 用来接收数据 ，会有一个回调，这个回调就是A要接收过来的数据

<template>
  <div class="A">
    <h2>兄弟A</h2>
    <p>A的一个数据: {{ msgA }}</p>
    <p>B传过来的数据: {{ BtoA }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msgA: "data-A",
      BtoA: "",
    };
  },
  mounted() {
    //绑定全局事件Event
    this.$bus.$on("Event", (e) => {
      this.BtoA = e;
    });
  },
  destroyed() {
    this.$bus.off("Event"); // 销毁 Event事件，因为其他组件通信还要用 $bus
  },
};
</script>

3.去B（给A发送数据的组件），用 $emit 触发刚才A要接收数据定义那个事件（Event），把要传递的数据扔后面。

<template>
  <div class="A">
    <h2>兄弟B</h2>
    <p>B的一个数据: {{ msgB }}</p>
    <button @click="sandMsgToA">把B的数据data-B给A</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msgB: "data-B",
    };
  },
  methods: {
    sandMsgToA() {
      //触发全局事件Event
      this.$bus.$emit("Event", this.msgB);
    },
  },
};
</script>

关于全局事件总线的详细解析（其中详细解析了如何 配置全局事件总线，如何传递数据，及其原理）

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili