vue.js 非父子通信-事件总线

Vue.js 中，非父子组件之间的通信可以使用事件总线来实现。事件总线是一个中央化的事件管理器，可以让任意组件之间进行通信。

实现事件总线的步骤如下：

1. 创建一个新的 Vue 实例作为事件总线：

// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

1. 在需要通信的组件中，通过 EventBus 发送事件：

// ComponentA.vue
import { EventBus } from './EventBus.js';
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello from ComponentA');
    }
  }
}

1. 在接收事件的组件中，通过 EventBus 监听事件：

// ComponentB.vue
import { EventBus } from './EventBus.js';
export default {
  mounted() {
    EventBus.$on('message', (data) => {
      console.log(data); // 输出：Hello from ComponentA
    });
  }
}