使用Event bus实现兄弟组件通讯

69. 使用Event bus实现兄弟组件通讯

1. 创建一个event bus实例

在Vue项目中，可以在src目录下新建一个event-bus.js文件，用来创建一个空的Vue实例，并导出该实例：

import Vue from 'vue';

export const EventBus = new Vue();

2. 在发送消息的组件中，使用$emit方法触发事件

例如，在组件A中需要向组件B发送一个名为"message"的事件，可以在组件A的方法中使用$emit方法触发该事件：

import { EventBus } from '@/event-bus.js';

export default {
  name: 'ComponentA',
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello, ComponentB!');
    }
  }
}

其中，第一个参数是要发送的事件名，第二个参数是要发送的数据。

3. 在接收消息的组件中，使用$on方法监听事件

在组件B中，需要在created钩子中使用$on方法监听事件：

import { EventBus } from '@/event-bus.js';

export default {
  name: 'ComponentB',
  data() {
    return {
      message: ''
    }
  },
  created() {
    EventBus.$on('message', (data) => {
      this.message = data;
    });
  }
}

其中，第一个参数是要监听的事件名，第二个参数是回调函数，在事件触发时执行，用来处理接收到的数据。

这样，当组件A中调用sendMessage方法触发事件后，组件B就会收到消息，并且更新页面上的数据。

需要注意的是，event bus是一个全局的实例，因此需要避免在多个组件中使用相同的事件名，以免产生冲突。同时，在组件销毁时，需要使用$off方法来移除事件监听，避免内存泄漏。