vue3 mitt 替换EventBus

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>