首先在main.js中定义
const app = createApp(App)
app.config.globalProperties.$eventBus = new mitt() // 创建全局事件总线对象
然后在发送事件的组件中写(js和ts导入方式不太一样,用法一样)
<script setup>
import {getCurrentInstance} from "vue";
//js版本
const $eventBus = getCurrentInstance()?.appContext?.config?.globalProperties?.$eventBus;
//ts版本
const {$eventBus} = getCurrentInstance()!.appContext.config.globalPropertiesfunction popUp(){// 触发事件总线$eventBus.emit('proUp', '1');
}
</script>
然后在接收事件的组件中
<script setup>
import {getCurrentInstance} from "vue";
const $eventBus = getCurrentInstance()?.appContext?.config?.globalProperties?.$eventBus;// 事件总线监听
$eventBus.on('proUp',(data)=>{console.log(data)
})
</script>
如果需要限制事件只能触发一次,在调用完后清除事件
// 清除当前事件$eventBus.off('proUp');