在vue3中 $ on，$off 和 $once 實例方法已被移除，組件實例不再實現事件觸發接口，因此大家熟悉的EventBus便無法使用了。然而我們習慣了使用EventBus，對于這種情況我們可以使用Mitt庫
npm i mitt -S
首先要在全局掛載 mitt
在app.config.globalProperties上掛在$Bus
使用ts必須要拓展ComponentCustomProperties類型才能獲得類型提示
main.ts
import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'
import mitt from 'mitt'const Mit = mitt()
const app = createApp(App)//TypeScript注冊
// 由于必須要拓展ComponentCustomProperties類型才能獲得類型提示
declare module 'vue' {export interface ComponentCustomProperties {$Bus: typeof Mit}
}
//vue3掛載全局API
app.config.globalProperties.$Bus = Mit
app.mount('#app')A.vue
在A中派發事件
getCurrentInstance是為了獲取當前的組件實例
獲取到當前組件的實例后,就可以在實例上的proxy獲取到我們全局綁定的$Bus了
<template><div class="A">A<button @click="emitA"> 派發一個事件</button></div>
</template><script setup lang="ts">
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()const emitA = () => {instance?.proxy?.$Bus.emit('on-EmitA', 'mitt')instance?.proxy?.$Bus.emit('on-EmitA2','mitt2')
}
</script><style lang="scss" scoped>
.A {width: 200px;height: 200px;background-color: aqua;.children {display: flex;justify-content: space-between;}
}
</style>B 中就可以監聽到事件了
.on的第一個參數是事件的名稱 這樣可以一次監聽一個事件
第一個參數傳入 * 即監聽全部事件 此時回調函數傳入的第一個參數接受綁定的事件名稱,第二個參數接受傳入的參數
B.vue
<template><div class="B">B<br></div>
</template><script setup lang="ts">
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()const Bus = (str: any) => {console.log('b=====>str', str)
}
instance?.proxy?.$Bus.on('on-EmitA', Bus)//監聽一個//同樣的也有off方法
instance?.proxy?.$Bus.off('on-EmitA', Bus)instance?.proxy?.$Bus.all.clear()//清楚全部事件// instance?.proxy?.$Bus.on('*', (type, str) => {
// console.log(type, 'b=====>str', str)
// })//監聽多個
</script><style lang="scss" scoped>
@import '../style.scss';.B {width: 200px;height: 200px;background-color: $cloud-water;
}
</style>
