vue通信方式EventBus的实现代码详解

深入理解Vue通信之EventBus实现细节

在Vue项目中，跨组件通信是一个重要的环节。除了props、vuex等常见的通信方式外，EventBus也是一个非常实用的通信方式。本文将详细介绍EventBus的实现代码，并带领大家深入理解其原理。

一、EventBus简介

EventBus是一种基于发布-订阅模式的通信方式。通过EventBus，我们可以实现组件之间的解耦通信。它适用于不需要关心数据来源的场合，如全局的消息提示等。

二、EventBus实现代码详解

以下是EventBus的基本实现代码：

```javascript

class EventBus {

constructor() {

this.event = Object.create(null); // 用于存储事件名称和对应的回调函数数组

}

// 注册事件

on(name, fn) {

if (!this.event[name]) { // 若该事件尚未注册，则初始化对应的回调函数数组

this.event[name] = [];

}

this.event[name].push(fn); // 将回调函数添加到数组中

}

// 触发事件

emit(name, ...args) {

this.event[name] && this.event[name].forEach((fn) => { // 若该事件已注册，则遍历回调函数并触发

fn(...args); // 触发回调函数并传递参数

});

}

// 仅触发一次的事件

once(name, fn) {

const cb = (...args) => { // 创建一个新的回调函数，触发后取消注册该事件

fn.apply(this, args); // 触发回调函数并传递参数

this.off(name, cb); // 取消注册该事件对应的所有回调函数（这里用新创建的cb函数来移除）

};

this.on(name, cb); // 注册该事件对应的回调函数（这里使用新创建的cb函数）

}

// 取消事件注册

off(name, offcb) { // 根据名称和回调函数取消注册对应的事件监听器（可选参数）如果没有提供offcb，则会移除所有的事件监听器）

if (this.event[name]) { // 若该事件已注册，则进行取消注册操作