当前位置: 首页 > article >正文

vue+mitt的简便使用

突然注意到 onMounted 在一个组件中可以多次调用,这不得发挥一下:
把绑定/解绑的逻辑封装到同一个模块中不就简化了吗,只需要在组件中注册一下子再传递一个回调就完事了。简单的组件中甚至不用引入onMounted和onUnmounted 

cnpm i mitt

/src/utils/emitter.js

import mitt from 'mitt'
import { onMounted, onUnmounted } from 'vue'
const names = {ONMOUNTED: 'onMounted',TRIGGER_FRESH: 'triggerFresh'
}
const __mitt = mitt()
function regist(name, cb) {onMounted(() => __mitt.on(name, cb))onUnmounted(() => __mitt.off(name, cb))
}
export default {mitt: __mitt,on: __mitt.on,off: __mitt.off,emit: __mitt.emit,regist,names
}
<script setup name="test">
import emitter from '@renderer/utils/emitter'
// 注册事件: 在onMounted时自动注册事件,在组件销毁时,自动取消注册
emitter.regist(emitter.names.ONMOUNTED, () => {console.log('test ONMOUNTED ')
})
</script><script setup name="test">
import { onMounted } from 'vue'
import emitter from '@renderer/utils/emitter'
//触发事件
onMounted(() => {emitter.emit(emitter.names.ONMOUNTED)
})
</script>

http://www.lryc.cn/news/2395809.html

相关文章:

  • Java正则表达式完全指南
  • Windows搭建Swift语言编译环境?如何构建ObjC语言编译环境?Swift如何引入ObjC框架?Interface Builder的历史?
  • 第七部分:第四节 - 在 NestJS 应用中集成 MySQL (使用 TypeORM):结构化厨房的原材料管理系统
  • Bug 背后的隐藏剧情
  • Golang | 搜索哨兵-对接分布式gRPC服务
  • 智慧充电桩数字化管理平台:环境监测与动态数据可视化技术有哪些作用?
  • debian12.9或ubuntu,vagrant离线安装插件vagrant-libvirt
  • 家政小程序开发,开启便捷生活新篇章
  • C++ 重载(Overload)、重写(Override)、隐藏(Hiding) 的区别
  • 李臻20242817_安全文件传输系统项目报告_第14周
  • 20250531MATLAB三维绘图
  • 深入理解C#异步编程:原理、实践与最佳方案
  • 基于千帆大模型的AI体检报告解读系统实战:使用OSS与PDFBox实现PDF内容识别
  • Redis缓存落地总结
  • Spring,SpringMVC,SpringBoot
  • npm、pnpm、yarn使用以及区别
  • flutter加载dll 报错问题
  • 数据分析学习笔记——A/B测试
  • 【python深度学习】Day 41 简单CNN
  • 基于RK3568/RK3588/全志H3/飞腾芯片/音视频通话程序/语音对讲/视频对讲/实时性好/极低延迟
  • 解决 Win11 睡眠后黑屏无法唤醒的问题
  • [ElasticSearch] RestAPI
  • Linux中的shell脚本
  • dvwa3——CSRF
  • 【学习笔记】Transformer
  • 欢乐熊大话蓝牙知识12:用 BLE 打造家庭 IoT 网络的三种方式
  • 02.上帝之心算法用GPU计算提速50倍
  • MES管理系统:Java+Vue,含源码与文档,实现生产过程实时监控、调度与优化,提升制造企业效能
  • LeetCode算法题 (搜索二维矩阵)Day18!!!C/C++
  • VectorStore 组件深入学习与检索方法