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

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>

相关文章:

  • Linux 简单模拟实现C语言文件流
  • 剑指offer13_剪绳子
  • [Protobuf]常见数据类型以及使用注意事项
  • MacroDroid安卓版:自动化操作,让生活更智能
  • Android第十一次面试补充篇
  • 力扣题解106:从中序与后序遍历序列构造二叉树
  • 雪花算法:分布式ID生成的优雅解决方案
  • LINUX 61 rsync定时同步;软链接
  • RAGflow详解及实战指南
  • 《C++初阶之入门基础》【C++的前世今生】
  • C++命名空间深度解析
  • 功能丰富的PDF处理免费软件推荐
  • 如何实现告警的自动化响应?
  • Java求职者面试题详解:Spring、Spring Boot、MyBatis技术栈
  • PyTorch——DataLoader的使用
  • Java八股文智能体——Agent提示词(Prompt)
  • IDEA,Spring Boot,类路径
  • 论文阅读(六)Open Set Video HOI detection from Action-centric Chain-of-Look Prompting
  • Linux 学习-模拟实现【简易版bash】
  • 从单机到集群,再到分布式,再到微服务
  • 邢台专业网站建设/seo需要懂代码吗
  • 做分析图用的地图网站/网站优化软件费用
  • 做网站的公司杭州/东莞百度快速优化排名
  • 用javascript做的网站/网络营销策划方案3000字
  • 做视频网站的备案要求/关键词点击排名系统
  • 企业网站做留言板有什么优势/百度知道一下