1. eventBus 使用说明
eventBus 是一个事件总线(Event Bus)实例,用于在不同的组件或模块之间进行通信。它提供了 on、off 和 emit 方法来订阅、取消订阅和触发事件。以下是 eventBus 的详细使用方法:
2. 主要方法
on(eventName: string, callback: Callback): void
功能:订阅一个事件。
参数:
eventName:事件名称(字符串)。
callback:事件触发时执行的回调函数。
off(eventName: string, callback: Callback): void
功能:取消订阅一个事件。
参数:
eventName:事件名称(字符串)。
callback:要取消订阅的回调函数。
emit(eventName: string, ...args: any[]): void
功能:触发一个事件,并传递参数给所有订阅该事件的回调函数。
参数:
eventName:事件名称(字符串)。
...args:传递给回调函数的参数。
3. 使用
在项目中创建eventbus文件夹,里面创建index.tsx
js
type Callback = (...args: any[]) => void
class EventBus {
private events: Map<string, Callback[]>
constructor() {
this.events = new Map()
}
on(eventName: string, callback: Callback): void {
if (!this.events.has(eventName)) {
this.events.set(eventName, [])
}
this.events.get(eventName)?.push(callback)
}
off(eventName: string, callback: Callback): void {
if (this.events.has(eventName)) {
const callbacks: any = this.events.get(eventName)
const index = callbacks.indexOf(callback)
if (index !== -1) {
callbacks.splice(index, 1)
}
}
}
emit(eventName: string, ...args: any[]): void {
if (this.events.has(eventName)) {
this.events.get(eventName)?.forEach(callback => {
callback(...args)
})
}
}
}
const eventBus = new EventBus()
export default eventBus
订阅事件
在组件 A 中订阅一个事件:
js
import React, { useEffect } from 'react';
import eventBus from '@/packages/eventbus';
const ComponentA = () => {
useEffect(() => {
const handleEvent = (data: any) => {
console.log('ComponentA received event:', data);
};
eventBus.on('myEvent', handleEvent);
// 清理订阅
return () => {
eventBus.off('myEvent', handleEvent);
};
}, []);
return <div>Component A</div>;
};
export default ComponentA;
触发事件
在组件 B 中触发该事件:
js
import React from 'react';
import eventBus from '@/packages/eventbus';
const ComponentB = () => {
const triggerEvent = () => {
eventBus.emit('myEvent', { message: 'Hello from Component B!' });
};
return (
<div>
Component B
<button onClick={triggerEvent}>Trigger Event</button>
</div>
);
};
export default ComponentB;