vue3 发布订阅插件---mitt

安装

 npm install mitt -s

 使用

1, 全局挂载使用

main.ts

import mitt from 'mitt'

const app = createApp(App)
app.component('Card',Card)

const Mit = mitt()

declare module 'vue' {
  export interface ComponentCustomProperties {
    $Bus: typeof Mit
  }
}

// 挂载到全局
app.config.globalProperties.$Bus = Mit

app.mount('#app')

组件中使用：

A组件发送事件和参数

<script setup lang="ts">
// 相当于vue2中的this
import { getCurrentInstance } from 'vue'

const data:string = 'mitt'
const ins = getCurrentInstance()
const emit=()=> {
    // 传递两个事件
  ins?.proxy?.$Bus.emit('on_click', data)
  ins?.proxy?.$Bus.emit('on_click2', 'ljad')
}
</script>

B组件接收

<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'

const ins = getCurrentInstance()
const num = ref('')
// 一个事件
// ins?.proxy?.$Bus.on('on_click', (...arg: any) => {
//   num.value = arg[0]
// })

// 接收多个事件
ins?.proxy?.$Bus.on('*', (type, ...args: any) => {
  console.log('type,args', type,args)
  if (type === 'on_click2') {
    num.value = args[0]
  }
})
</script>

取消监听、删除

const Bus = (...arg: any) => {

   num.value = arg[0]

}

// 监听事件

ins?.proxy?.$Bus.on('on_click', Bus)

// 取消单个订阅事件

ins?.proxy?.$Bus.off('on_click', Bus)

// 取消所有mitt

ins?.proxy?.$Bus.all.clear()

 2. 单独创建一个文件，使用的时候引用文件

// mitt库默认导出的是一个函数，我们需要执行它从而得到事件总线的对象
/* eventbus.js */
import mitt from 'mitt'
const Bus= mitt()
export default Bus
在指定组件中导入并使用它

复制代码
/* one.vue */
// 模板代码
<button @click="send">sure</button>  

// 导入事件总线
import Bus from "@/utils/eventbus.js";  
// methods代码
send(){
    // 触发自定义总线why，并传入一个对象
     Bus.emit("updateList",{name:'bbv',age:22})
}
复制代码
复制代码
/* two.vue */

// 导入事件总线
import Bus from "./utils/eventbus.js";

// 注册updataList事件总线
created(){
    Bus.on("updateList",msg=>{ console.log(msg) }) }
复制代码
取消所有的mitt事件

Bus.all.clear()
取消指定的mitt事件

// 回调定义在外部，类似于setTimeout
function onXxx(){}
Bus.on('foo',onXxx) //监听
Bus.off('foo',onXxx) //取消监听

 参考 Vue3中使用全局事件总线mitt - 简书 (jianshu.com) vue--Mitt全局事件的发布和订阅与取消订阅（也就是跨组件通讯） - _Origin - 博客园 (cnblogs.com)