vue中eventBus的使用

今天写项目时候，维护的是之前别人写的项目，在两个组件中，一个组件中点击一个按钮，要调用另一个组件的函数，更新另一个组件页面上的信息。两个组件不是父子，差了好几代，也不好用自定义事件。vuex中也不好使用，页面几十处信息需要修改，放到vuex中过于麻烦。所以使用eventBus。

vue2中使用eventBus步骤

1. 创建一个EventBus.js文件，防止后面多次使用

// EventBus.js

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

2.在你的组件中，当需要发送一个事件时，你可以使用EventBus的$emit方法：

// 在组件A中发送事件,引入
import { EventBus } from './EventBus';

EventBus.$emit('my-event', data);

3.在另一个组件中，你可以使用EventBus的$on方法来监听事件：一般mounted里面使用

import { EventBus } from './EventBus';
mounted() {
 EventBus.$on('my-event', (data) => {
   // 处理事件
 });
};

vue2中使用eventBus步骤，一样的步骤，就api不同

// EventBus.js

import { createApp } from 'vue';

const app = createApp({});

export const eventBus = app;

 

// 在组件A中发送事件
import { eventBus } from './EventBus';

eventBus.emit('my-event', data);

// 在组件B中监听事件
import { eventBus } from './EventBus';

eventBus.on('my-event', (data) => {
  // 处理事件
});