一、mitt介绍

mitt是一款轻量级的组件通信插件(大小仅为200字节左右)

二、mitt安装

npm install --save mitt

三、使用

1.在组件中使用

import mitt from 'mitt'
//创建mitt实例
const emitter = mitt()

// 监听事件
emitter.on('foo', e => console.log('foo', e) )

// 通过通配符监听所有事件
emitter.on('*', (type, e) => console.log(type, e) )

// 触发事件并传值
emitter.emit('foo', { a: 'b' })

// 清除所有监听
emitter.all.clear()

//卸载指定监听
emitter.off('foo', onFoo)

2.全局使用

// 在main.js中引入
import mitt from 'mitt'
const emitter = mitt()
//....
const app= createApp(app)
//挂到全局
app.config.globalProperties.emitter = emitter

//在模块中是使用
import { getCurrentInstance } from 'vue'
const { emitter } = getCurrentInstance()!.appContext.config.globalProperties
//触发
emitter.emit('foo', { a: 'b' })
//监听
emitter.on('foo', e => console.log('foo', e))
//移除监听
emitter.off('foo')
//清空所有监听
emitter.all.clear();