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

给子组件传递dom元素引用实例方案

在实际开发中有一个比较常见的场景是,父组件写了一个el-form组件。然后里面内容很多,所以拆成了子组件。那么子组件中就有调用父组件的form实例方法的需求。到所以这就涉及一个问题,怎么把父组件的form实例传递给子应用。
这里传递后直接调用是不行的。关键点在于父子组件生命周期渲染顺序。只有mounted会子优先父执行,其他的都是父优先子。然后实例的引用是在mounted加载完成之后才有的。以vue2的生命周期为例:

父子组件的生命周期钩子函数的执行顺序如下:

父组件的beforeCreate
父组件的created
父组件的beforeMount
子组件的beforeCreate
子组件的created
子组件的beforeMount
子组件的mounted
父组件的mounted
当子组件被销毁时,生命周期钩子的执行顺序如下:

子组件的beforeDestroy
子组件的destroyed
父组件的beforeDestroy
父组件的destroyed

因此解决方案就很明确。父组件分vue2和vue3的方式正常传递引用即可,子组件的话要调用nextTick。这里还涉及一个nextTick的实现原理,有兴趣可以了解一下。

vue2传递实例

<child :ticketFormRef="$refs.ticketFormRef" />

vue3传递实例

<child :ticketFormRef="ticketFormRef" />

子组件调用实例

onMounted(() => {
  nextTick(() => props.ticketFormRef.clearValidate());  
})

http://www.kler.cn/news/319309.html

相关文章:

  • 浮点型的详细介绍以及sizeof
  • 灵当CRM index.php SQL注入漏洞复现
  • C语言之初阶指针
  • 【机器学习】自监督学习:解锁数据的无限潜能
  • 大数据-146 Apache Kudu 安装运行 Dockerfile 模拟集群 启动测试
  • ubuntu 安装minikube,并拉取k8s镜像
  • 2024年9月SCI-苔藓生长优化算法Moss Growth Optimization-附Matlab免费代码
  • 线性代数书中求解线性方程组的三种方法的实例
  • C标准库<string.h>-mem开头的函数
  • Linux安装Redis
  • 使用vite+react+ts+Ant Design开发后台管理项目(三)
  • 5G技术对IT行业的影响及未来发展
  • SpringBoot整合ELK实现日志监控(保姆级教程)
  • fo-dicom,第一个基于.NET Standard 2.0 开发的DICOM开源库
  • 【ANTLR】常见的几种编程语言表达模式
  • 古代经典名方目录数据库-支持经典名方检索!
  • IMS注册流程中的基本路由寻址过程
  • 西部移动硬盘怎么恢复数据?4种详细且实用的方法
  • 腾讯邮箱上传附件卡、慢、无法上传问题处理
  • 详解机器学习经典模型(原理及应用)——逻辑回归
  • neo4j小白入门
  • 记录踩坑 uniapp 引入百度地图(微信小程序,H5,APP)
  • 研一上课计划2024/9/23有感
  • 高效编程的利器 Jupyter Notebook
  • Java Map类
  • 《AI办公类文档工具系列之三——ChatPDF》
  • 【java21】java21新特性之简单的Web服务器jwebserver
  • 主流卷积神经网络CNN总结
  • 网络安全知识:灾难恢复计划简介
  • 第一感觉有问题,但是没有提出来,要相信直觉。