网站开发设计心得及体会必应搜索引擎网址

EventBus（事件总线）是Vue中用于实现非父子组件间通信的轻量级方案，通过一个中央Vue实例管理事件的发布与订阅。

一、基本使用步骤

1.创建EventBus实例

推荐单独创建文件（如event-bus.js）导出实例，避免全局污染：

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

2.发送事件（发布）

在需要通信的组件中通过$emit触发事件，可传递数据：

import { EventBus } from './event-bus.js';
export default {methods: {sendData() {EventBus.$emit('event-name', { key: 'value' }); // 事件名 + 数据}}
};

2.接收事件（订阅）

在目标组件中通过$on监听事件，处理数据：

import { EventBus } from './event-bus.js';
export default {mounted() {EventBus.$on('event-name', (data) => {console.log('接收数据:', data); // 处理数据});}
};

3.移除监听（避免内存泄漏）

在组件销毁前（beforeDestroy或beforeUnmount钩子）清理监听：

beforeDestroy() {EventBus.$off('event-name'); // 移除指定事件// EventBus.$off(); // 移除所有事件（无参数）
}