vue3+ts使用mitt进行兄弟传值

1.先引入mitt依赖

npm i mitt

2.main.ts挂载全局（这是我自己的写的学习demo，还有其他的一些配置）

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import axios from "axios";
import * as echarts from 'echarts'
import mitt from 'mitt'

require("./mock/mock.js");
const app = createApp(App);
//全局挂载mitt
const Mitt = mitt()
declare module 'vue' {
  export interface ComponentCustomProperties {
      $Bus: typeof Mitt 
  }
}
app.config.globalProperties.$Bus = Mitt

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
app.use(store).use(router).use(ElementPlus).mount("#app");
//全局挂载axios
app.config.globalProperties.$axios = axios;
//全局挂载echarts
app.config.globalProperties.$echarts = echarts

3.创建一个公共ts文件，在两个兄弟组件中引入

 4.发送方

<template>
    <div>
        <h1>我是妹妹组件</h1>
        <el-button type="success" @click="emitTip">传给哥哥</el-button>
    </div>
</template>
<script lang="ts">
import { defineComponent, getCurrentInstance, ComponentInternalInstance, ref, onMounted } from 'vue'
import  emitter  from '@/utils/bus'

export default defineComponent({
    setup() {
        const list=ref('我是妹妹数据')
        const { proxy } = getCurrentInstance() as ComponentInternalInstance
        const emitTip = () => {
            console.log('妹妹')
            emitter.emit('changeB', list.value)
        }
        // let str = ref<string>('')

        //     emitter.on('changeB', (params: any) => {
        //     str.value = params
        // })
      
        return { emitTip, list }
    },
})
</script>

5接收方（因为是ts，所有形参要加类型）

<template>
    <div>
        <h1>我是哥哥组件</h1>
        {{ data }}
    </div>
</template>
<script lang="ts">
import { defineComponent,ref,getCurrentInstance, ComponentInternalInstance, onMounted  } from 'vue'
import  emitter  from '@/utils/bus'


export default defineComponent({
    setup() {
        const { proxy } = getCurrentInstance() as ComponentInternalInstance
        const data=ref('哥哥自己的数据')
        onMounted(()=>{
            emitter.on('changeB',(val:any)=>{
                console.log(val,"接收的数据")
                data.value=val
            })
        })
        return{data}
    },
})
</script>

6.效果