1.安装

npm install mitt -S

2.引入

全局引入:
在main.ts中
// 1.引入mitt,声明一个实例Mit
import mitt from "mitt"
const Mit = mitt()

// 2.v3挂载全局$Bus的API
app.config.globalProperties.$Bus = Mit

// 3.TypeScript注册
// 必须要拓展ComponentCustomProperties类型才能获得类型提示
declare module "vue" {
    export interface ComponentCustomProperties {
        $Bus: typeof Mit
    }
}

import { createApp } from "vue"
import App from "./App.vue"
import "./style.css"
import Card from "./components/Card/index.vue"
import ElementPlus from "element-plus"
import "element-plus/dist/index.css"
// 引入mitt,声明一个实例Mit
import mitt from "mitt"
const Mit = mitt()

// TypeScript注册
// 必须要拓展ComponentCustomProperties类型才能获得类型提示
declare module "vue" {
    export interface ComponentCustomProperties {
        $Bus: typeof Mit
    }
}

const app = createApp(App)
// v3挂载全局$Bus的API
app.config.globalProperties.$Bus = Mit

app.use(ElementPlus).component("Card", Card)
app.mount("#app")

3.使用

在兄弟组件A,B中传参
// 传一个值
A中:
const emit = () => {
     instance?.proxy?.$Bus.emit("on-num", 100)
}
B中:
instance?.proxy?.$Bus.on("on-num", (str: any) => {
    console.log(str) // 100
})


// off,清空一个事件
B中:
instance?.proxy?.$Bus.off('on-num')


// 传多个值
A:
const emit = () => {
    instance?.proxy?.$Bus.emit("on-num", 100)
    instance?.proxy?.$Bus.emit("on-num2", 101)
}
B中:
instance?.proxy?.$Bus.on("*", (type: string, str: any) => {
    console.log(type, str)
})


// all.clear(),清空所有事件
instance?.proxy?.$Bus.all.clear()

A.vue:
<template>
    <div style="border: 1px solid red">
        A
        <button @click="emit">A</button>
    </div>
</template>

<script setup lang="ts">
import { getCurrentInstance } from "vue"
const instance = getCurrentInstance() as any

// 传一个值
// 注:可选链instance?.proxy?.$Bus.emit("on-num", 100)
// 注:如果$Bus找不到就加上as any,const instance = getCurrentInstance() as any
// const emit = () => {
//     instance?.proxy?.$Bus.emit("on-num", 100)
// }

// 传多个值
const emit = () => {
    instance?.proxy?.$Bus.emit("on-num", 100)
    instance?.proxy?.$Bus.emit("on-num2", 101)
}
</script>


B.vue:
<template>
    <div style="border: 1px solid green">B</div>
</template>
<script setup lang="ts">
import { getCurrentInstance } from "vue"
const instance = getCurrentInstance() as any
// 接收一条
// instance?.proxy?.$Bus.on("on-num", (str: any) => {
//     console.log(str) // 100
// })

// off,清空一个事件
// instance?.proxy?.$Bus.off('on-num')

// 接收多条
instance?.proxy?.$Bus.on("*", (type: string, str: any) => {
    console.log(type, str)
})

// all.clear()清空所有事件
instance?.proxy?.$Bus.all.clear()
</script>