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

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.xdnf.cn/news/10495.html

相关文章:

  • API异常信息如何实时发送到钉钉
  • 重读《人件》Peopleware -(14)Ⅱ 办公环境 Ⅶ 把门带上
  • Windows商店中的免费扫雷游戏应用
  • 将手机网络经USB数据线和本地局域网共享给华为AP6050DN无线接入点
  • 任务22:创建示例Django项目,展示ECharts图形示例
  • 【渲染】拆解三国:谋定天下场景渲染技术
  • 3D Gaussian splatting 06: 代码阅读-训练参数
  • 《机器学习数学基础》补充资料:韩信点兵与拉格朗日插值法
  • [yolov11改进系列]基于yolov11引入多尺度空洞注意力MSDA的python源码+训练源码
  • “StPd” 陷阱 | 认知偏差?自我局限?还是清醒者的阵痛?
  • 如何排查Redis单个Key命中率骤降?
  • Java 面试中的数据库设计深度解析
  • 【GESP真题解析】第 4 集 GESP 三级 2023 年 6 月编程题 1:春游
  • 高效Excel数据净化工具:一键清除不可见字符与格式残留
  • 利用 Python 爬虫获取淘宝商品详情
  • SOC-ESP32S3部分:23-文件系统
  • 基于STM32的流水线机器人自动分拣系统设计与实现:技术、优化与应用
  • 力扣HOT100之动态规划:416. 分割等和子集
  • 复杂业务场景下 JSON 规范设计:Map<String,Object>快速开发 与 ResponseEntity精细化控制HTTP 的本质区别与应用场景解析
  • OS10.【Linux】yum命令
  • Tomcat 线程模型详解性能调优
  • 【从零开始学习QT】信号和槽
  • 性能优化 - 案例篇:缓冲区
  • 【PyQt5】PyQt5初探 - 一个简单的例程
  • Python 训练营打卡 Day 32-官方文档的阅读
  • Client-Side Path Traversal 漏洞学习笔记
  • HackMyVM-Teacher
  • 逆向入门(1)
  • 【irregular swap】An Examination of Fairness of AI Models for Deepfake Detection
  • pikachu通关教程-CSRF