umijs+react——EventEmitter，eventBus实现非父子组件事件触发

 

1.新建eventBus.ts

// src/utils/eventBus.ts
import { EventEmitter } from 'events';
export default new EventEmitter();

2.组件A

import eventBus from '@/utils/event-bus'

...
<Button
    onClick={() => {
        // 发送事件
        eventBus.emit('test-click', 9)
     }}
>测试</Button>
...

3.组件B

import eventBus from '@/utils/event-bus'

...
// 接收事件
useEffect(() => {
    const handler = (data: number) => {
      console.log('data', data)
    }
    eventBus.on('test-click', handler)
    return () => {
      eventBus.off('test-click', handler)
    }
}, [])
...