vue3+ts中eventBus跨组件传值

1. 安装 mitt：

npm install mitt

2. 创建类型化的 EventBus:

// eventBus.ts
import mitt, { Emitter } from 'mitt';

// 定义事件类型（键为事件名，值为事件参数类型）
type Events = {        
  'custom-event': { data: boolean}; 
};

const emitter: Emitter<Events> = mitt<Events>();
export default emitter;

3. 发送事件（触发）:

<script setup lang="ts">
import emitter from './eventBus';

const sendMessage = () => {
  emitter.emit('custom-event', { data: true });
};
</script>

<template>
  <button @click="sendMessage">Send Event</button>
</template>

4. 接收事件（监听）:

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
import emitter from './eventBus';

const handleCustomEvent = (payload: { data: boolean}) => {
  console.log('Custom event data:', payload.data);
};

onMounted(() => {
  emitter.on('custom-event', handleCustomEvent);
});

onUnmounted(() => {
  emitter.off('custom-event', handleCustomEvent);
});
</script>

<template>
  <div>接收组件</div>
</template>