Vue——使用mitt

1. 安装依赖

npm i -S mitt

2. main文件中引入

import mitt from "mitt"

const emitter = mitt()

//Typescript 注册
declare module 'vue' {
  export interface ComponentCustomProperties {
    $Bus: typeof emitter
  }
}

const app = createApp(App)
app.config.globalProperties.$Bus = emitter

3. A组件

<script setup lang="ts">
import { getCurrentInstance } from "vue"
const instance = getCurrentInstance()
instance?.proxy?.$Bus.on("*", (...arg) => {
  console.log("on", arg)
})
</script>

4. B组件

<script setup lang="ts">
import { getCurrentInstance } from "vue"
const instance = getCurrentInstance()
const handleSend = () => {
  instance?.proxy?.$Bus.emit("event", { ok: true })
}
</script>

属性	描述
on(name,callback)	绑定事件，两个参数：name：绑定的方法名，callback：触发后执行的回调函数
emit(name,data)	触发事件，两个参数：name：触发的方法名，data：需要传递的参数
off(name)	解绑事件，一个参数：name：需要解绑的方法名
all	所有绑定事件的Map集合