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集合 |