Mitt使用体验

• 在vue3中$on，$off 和 $once 实例方法已被移除，组件实例不再实现事件触发接口，因此大家熟悉的EventBus便无法使用了,对于这种情况我们可以使用Mitt库
• 安装

npm install mitt -S

• main.ts 初始化

import mitt from 'mitt'
const Mit = mitt()
const app = createApp(App)
// 扩展声明 由于必须要拓展ComponentCustomProperties类型才能获得类型提示
declare module 'vue' {
  export interface ComponentCustomProperties {
    $Bus: typeof Mit
  }
}
app.config.globalProperties.$Bus = Mit
app.mount('#app')

• 使用方法通过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 emit1 = () => {
    instance?.proxy?.$Bus.emit('on-num', 100)
}
const emit2 = () => {
    instance?.proxy?.$Bus.emit('test', 500)
}
</script>

• B组件 监听（on）

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

const instance = getCurrentInstance()

// 订阅
instance?.proxy?.$Bus.on('on-num', (num) => {
    console.log(num,'===========>B')
})

instance?.proxy?.$Bus.on('test', (num) => {
    console.log(num,'===========>test')
})

/**
 * @description: * 代表监听所有的事件触发
 * @params {type} 事件名称
 * @params {num} 数据
 * @return {*}
 */
instance?.proxy?.$Bus.on('*', (type, num) => {
    console.log(type, num,'===========>B')
})
</script>
 

• 移除监听事件（off）

const Fn = (num: any) => {
    console.log(num, '===========>B')
}
instance?.proxy?.$Bus.on('on-num',Fn)//listen
instance?.proxy?.$Bus.off('on-num',Fn)//unListen

• 清空所有监听（clear）

instance?.proxy?.$Bus.all.clear()