一、参考

Vue3一兄弟组件传值之mitt，超详细！ - 掘金 (juejin.cn)

二、作用

兄弟组件通信

三、安装

 npm i mitt -S

四、初始化

4.1 全局挂载

在main.ts中添加如下代码

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import mitt from 'mitt'

const Mit = mitt()
// TypeScript注册:必须拓展ComponentCustomProperties类才能获取类型提示
declare module 'vue'{
    export interface ComponentCustomProperties{
        $Bus:typeof Mit
    }
}

export const app =  createApp(App)

app.config.globalProperties.$Bus =Mit;

app.mount('#app')

4.2 使用案例

4.2.1 环境搭建

在app.vue中加载两个兄弟组件A和B，现在需要A组件发送消息，B组件去接受

4.2.2 发送信息

A.vue内容如下：

```

4.2.3 消息接受

B.vue内容如下：

<template>
        <div style="border: 1px solid;">
        <div>我是 B</div>
        <div>{{ msg }}</div>
    </div>
</template>

<script setup lang="ts">
import {getCurrentInstance,ref} from 'vue'

const instance = getCurrentInstance()
const msg = ref() 

instance?.proxy?.$Bus.on("on-click",(str)=>{
    msg.value = str
})

</script>

4.2.4 网页演示

4.3 拓展

4.3.1 监听多个消息

现在A将会发送多个消息事件给B

B可以使用通配符*接收，表示接受所有消息

4.3.2 取消监听

// 删除监听
instance?.proxy?.$Bus.off("on-click",bus)

// 删除所有监听事件
instance?.proxy?.$Bus.all.clear()