typescript使用mitt在兄弟组件之间通信

在 TypeScript 中使用 `mitt` 实现兄弟组件之间的通信，可以按照以下步骤进行：

1. 安装 `mitt` 库：

   npm install mitt

2. 在需要通信的组件中引入 `mitt`：

   import mitt from 'mitt';

3. 在组件中定义事件总线：

   const bus = mitt();

4. 在需要发送事件的组件中，通过事件总线发送事件：

   bus.emit('eventName', data);

5. 在接收事件的组件中，通过事件总线监听事件：

   bus.on('eventName', (data) => {
     // 处理接收到的事件数据
   });

完整的示例代码如下：

import mitt from 'mitt';

// 在组件中定义事件总线
const bus = mitt();

// 发送事件的组件
function Sender() {
  const handleClick = () => {
    // 通过事件总线发送事件
    bus.emit('eventName', { foo: 'bar' });
  };

  return <button onClick={handleClick}>发送事件</button>;
}

// 接收事件的组件
function Receiver() {
  // 在组件挂载时注册事件处理函数
  React.useEffect(() => {
    bus.on('eventName', (data) => {
      // 处理接收到的事件数据
      console.log(data);
    });

    // 在组件卸载时注销事件处理函数
    return () => {
      bus.off('eventName');
    };
  }, []);

  return <div>接收事件</div>;
}