Mitt 是一个第三方消息发布/订阅JavaScript库,体积极小(压缩后小于200字节),与框架无关,Vue官方推荐使用
一、安装依赖包
npm install mitt
二、Mitt API
三、使用
方式一:创建一单独文件,在文件中创建事件总线对象并对外暴露,在使用事件总线的地方导入(比如vue组件中)
第一步:创建EventBus.ts 文件
第二步:在组件中导入并使用
打印结果:
方式二:全局挂载
vue2 中使用 Vue.prototype 将全局属性挂载到vue的原型对象上,应用内所有组件都可以访问
vue3 中使用 app.config.globalProperties,替代了vue2中的Vue.prototype,用于注册能够被应用内所有组件实例访问到的全局属性的对象
第一步:创建mitt实例并挂载到 app.config.globalProperties 上
第二步:在组件中使用
说明:
以<script setup>语法糖,在单文件组件中使用组合式 API中 this 是undefined,vue3提供了 getCurrentInstance() 方法用于获取当前组件实例;
以上代码可以正常编译及运行,但代码提示[ ……不存在属性“EventBus“……],是因为在app.config.globalProperties 上挂载的EventBus,要进行ComponentCustomProperties接口扩展,才能获得类型识别;ComponentCustomProperties接口 是 vue3提供的 增强组件实例类型以支持自定义全局属性,通过TypeScript 模块扩展 来扩展的
用法:
方式一:在main.ts文件中声明
方式二:单独一个文件中声明(文件名随意)