mitt使用

安装mitt

npm i mitt -s

在main.ts上创建mitt实例，声明类型导出（ts的用法）

import mitt from 'mitt'

const Mit = mitt()

// 将mitt的所有类型导出
declare module 'vue' {
    export interface ComponentCustomProperties{
        $Bus:typeof Mit
    }
}

app.config.globalProperties.$Bus = Mit

在a组件定义mitt

<template>
    <div>A组件</div>
    <button @click="emit">emit</button>
</template>

<script lang="ts" setup>
import { getCurrentInstance, reactive, ref } from 'vue'
const instance = getCurrentInstance()
console.log('proxy', instance)
const emit =()=>{
    instance?.proxy?.$Bus.emit('on-click','mitt')
    instance?.proxy?.$Bus.emit('on-click2','mitt2')
}
</script>
<style lang='scss' scoped>

</style>

mitt的使用，监听事件，清除事件

<template>
  <div>B组件</div>
</template>

<script lang="ts" setup>
import { getCurrentInstance,reactive, ref } from 'vue'
const instance = getCurrentInstance()
// 监听某个事件
instance?.proxy?.$Bus.on('on-click',(str)=>{
    console.log('str', str)
})
// 监听所有的事件
instance?.proxy?.$Bus.on('*',(type,str)=>{
    console.log('str', str,type)
})

const Bus = (str:any)=>{
    console.log('清除事件')
}
// 清除某个事件
instance?.proxy?.$Bus.off('on-click',Bus)
// 清空所有事件
instance?.proxy?.$Bus.all.clear();
</script>
<style lang='scss' scoped>
</style>