Vue3.x使用mitt.js进行组件通信
目录
- 快速开始
- 使用方式
- 核心原理
比起 Vue 实例上的 EventBus,mitt.js 好在哪里呢?首先它足够小,仅有200bytes,其次支持全部事件的监听和批量移除,它还不依赖 Vue 实例,所以可以跨框架使用,React 或者 Vue,甚至 jQuery 项目都能使用同一套库。
快速开始
npm install --save mitt
方式1,全局总线,vue 入口文件 main.js 中挂载全局属性。
import { createApp } from 'vue'; import App from './App.vue'; import mitt from "mitt"const app = createApp(App)app.config.globalProperties.$mybus = mitt()
方式2,封装自定义事务总线文件 mybus.js,创建新的 js 文件,在任何你想使用的地方导入即可。
import mitt from 'mitt'export default mitt()
【Vue3.x使用mitt.js进行组件通信】方式3,直接在组件里面导入使用。推荐大家使用这种方式,因为分散式更方便管理和排查问题。
文章图片
使用方式 其实 mitt 的用法和 EventEmitter 类似,通过 on 方法添加事件,off 方法移除,clear 清空所有。
import mitt from 'mitt'const emitter = mitt()// listen to an eventemitter.on('foo', e => console.log('foo', e) )// listen to all eventsemitter.on('*', (type, e) => console.log(type, e) )// fire an eventemitter.emit('foo', { a: 'b' })// clearing all eventsemitter.all.clear()// working with handler references:function onFoo() {}emitter.on('foo', onFoo)// listenemitter.off('foo', onFoo)// unlisten
需要注意的是,导入的 mitt 我们是通过函数调用的形式,不是 new 的方式。在移除事件的需要传入定义事件的名字和引用的函数。
核心原理 原理很简单,就是通过 map 的方法保存函数。经过我的删减代码不到 30 行。
export default function mitt(all) { all = all || new Map(); return {all,on(type, handler) {const handlers = all.get(type); const added = handlers && handlers.push(handler); if (!added) {all.set(type, [handler]); }},off(type, handler) {const handlers = all.get(type); if (handlers) {handlers.splice(handlers.indexOf(handler) >>> 0, 1); }},emit(type, evt) {((all.get(type) || [])).slice().map((handler) => { handler(evt); }); ((all.get('*') || [])).slice().map((handler) => { handler(type, evt); }); } }; }
Vue3 从实例中完全删除了 $on、$off 和 $once 方法。$emit 仍然是现有API的一部分,因为它用于触发由父组件以声明方式附加的事件。
到此这篇关于Vue3.x使用mitt.js进行组件通信的文章就介绍到这了,更多相关Vue3.x mitt.js组件通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- 由浅入深理解AOP
- 【译】20个更有效地使用谷歌搜索的技巧
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- iOS中的Block
- Linux下面如何查看tomcat已经使用多少线程
- 使用composer自动加载类文件
- android|android studio中ndk的使用
- 使用协程爬取网页,计算网页数据大小