mitt
在vue3中 $on, $off和$once实例方法已经被移除,我们熟悉的EventBus无法使用,
对于这用情况我们使用Mitt库(和EventBus大同小异)
1 npm install mitt -S
2 mian.js/ts 初始化
import mitt from 'mitt'
cont Mit = mitt();
Vue3挂载全局API
app.config.globalProperties.$Bus = Mit
c.vue 组件
<template>
<div>
<h1>c组件</h1>
<button @click="emit">派发事件$Emit</button>
</div>
</template>
<script setup lang='ts'>
import{ref,reactive,getCurrentInstance} from 'vue'
const instance = getCurrentInstance();
const emit =()=>{
instance?.proxy?.$Bus.emit('on-huhu','mitt')
instance?.proxy?.$Bus.emit('on-huhu1','mitt1')
}
</script>
d.vue 组件
<template>
<div>
<h1>d组件</h1>
</div>
</template>
<script setup lang='ts'>
import{ref,reactive,getCurrentInstance} from 'vue'
const instance = getCurrentInstance();
// instance?.proxy?.$Bus.on('on-huhu',(str)=>{
// console.log(str,'+++++++++++++d')
// })
//可以监听多条
instance?.proxy?.$Bus.on('*',(type,str)=>{
console.log(type,str,'+++++++++++++d')
})
</script>