vue3-Mitt使用

1.安装   

 npm i mitt -S

2.main.ts初始化--->全局挂载

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

const Mit = mitt()

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

const app = createApp(App)

//Vue3挂载全局API
app.config.globalProperties.$Bus = Mit

app.mount('#app') 

3使用方法通过emit派发， on 方法添加事件，off 方法移除，clear 清空所有

A组件派发（emit） 

<template>
    <div>
        <h1>我是A</h1>
        <button @click="emit1">emit1</button>
        <button @click="emit2">emit2</button>
    </div>
</template>

<script setup lang='ts'>
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance();
const emit = () => {
    instance?.proxy?.$Bus.emit('on-click', 100)
}

</script>

<style>
</style> 

B组件监听on

<template>
    <div>
        <h1>我是B</h1>
    </div>
</template>

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

const fn = (num) => {
    console.log(num,'===========>B')
}

//监听on-num事件
instance?.proxy?.$Bus.on('on-click', fn)

//监听所有事件on('*')
//instance?.proxy?.$Bus.on('*',(type,num)=>{
      //监听*时，第一个参数是一个事件名称，第二个参数是传递的参数
//    console.log(type,num,'===========>B')
//}) 

//移除on-num监听事件（off）
//const Bus=(str:any)=>{
//    console.log(str,'===========>B')
//}
// off（取消的mitt事件，取消的函数）
//instance?.proxy?.$Bus.off('on-click',fn)

//all.clear()清空所有监听
//instance?.proxy?.$Bus.all.clear()

</script>

<style>
</style>