Vue使用Mitt

Vue 全局挂载使用Mitt

Mitt安装

npm install mitt -S

ts全局挂载Mitt

import mitt from "mitt"

const Mit = mitt()

const app = createApp(App)
// 设置$Bus的类型
declare module "vue" {
  export interface ComponentCustomProperties {
    $Bus: typeof Mit
  }
}

app.config.globalProperties.$Bus = Mit

Mitt的使用

1. A组件

   <template>
     <div>
       <h1>我是A</h1>
       <t-button @click="emit">emit</t-button>
     </div>
   </template>
   
   <script setup lang="ts">
   import { getCurrentInstance } from "vue"
   const instance = getCurrentInstance()
   const emit = () => {
     instance?.proxy?.$Bus.emit("on-emit", "mitt")
     instance?.proxy?.$Bus.emit("on-emit1", "mitt1")
   }
   </script>

2. B组件

   <template>
     <div>
       <h1>我是B</h1>
     </div>
   </template>
   
   <script setup lang="ts">
   import { getCurrentInstance } from "vue"
   const instance = getCurrentInstance()
   instance?.proxy?.$Bus.on("on-emit", (str) => {
     console.log(str)
   })
   // 监听多条
   instance?.proxy?.$Bus.on("*", (type, str) => {
     console.log(type, str)
   })
   
   // 去除监听
   instance?.proxy?.$Bus.off("on-emit", (str) => {
     console.log(str)
   })
   
   // 去除所有监听
   instance?.proxy?.$Bus.all.clear()
   </script>