vue3中使用全局事件总线

1、安装mitt

npm i mitt

2、封装mitt

在src下创建utils，在utils创建文件emitter.ts

import mitt from 'mitt'
const emitter = mitt()
export default emitter

3、使用mitt

在需要发送数据的组件的script标签中

import emiter from '../utils/emitter'
//发送数据
emitter.emit('send',{id:1,name:'张三')

在需要接收数据的组件

import emitter from '../utils/emitter'
emitter.on('send',info=>console.log('接收到的数据为：',info)

4、案例演示

需要发送数据的组件，其中emitter.emit('send',{data:123,id:222})，这里的send是发送事件的名字，接收数据也用这个名字

<template>
    <button @click="send">发送一个东西</button>
</template>
<script setup lang="ts">
import emitter from '../utils/emitt'
const send=()=>{
    console.log('发送');
    emitter.emit('send',{data:123,id:222})
}
</script>
<style>

</style>

需要接收数据的组件，下图的info代表接收到的数据

<template>

</template>
<script setup lang="ts">
import emitter from '../utils/emitt'
emitter.on('send',info=>console.log(info))
</script>
<style>

</style>