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

news/2024/9/28 10:37:06/

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

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

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

vue2传递实例

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

vue3传递实例

javascript"><child :ticketFormRef="ticketFormRef" />

子组件调用实例

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

http://www.ppmy.cn/news/1530914.html

相关文章

【手机马达共振导致后主摄马达声音异常】

手机马达共振导致后主摄马达声音异常 问题根因解决方案其他易混淆 问题根因 当手机马达的震动频率和摄像头AF马达的一二阶震动频率处于共振频段的时候&#xff0c;手机马达震动时候有很大概率会干扰到后置摄像头的对焦马达正常工作&#xff0c;可能出现的影响有出现滋滋杂音&a…

vue 中如何实现鼠标拖动出发滚动条的跟随移动?

使用场景 在做弹窗、表单或 tab 切换需求的时候&#xff0c;有时候因为内容过长会导致出现滚动条&#xff0c;但是只能拖动滚动条时会导致操作不便&#xff0c;我们会希望实现通过拖动内容区实现滚动条的滑动。这样操作就会简单多了。 实现思路 如果要实现鼠标辅助触发滚动条…

Ubuntu 64系统信息查看

一、查看系统基本信息 uname -a 显示系统内核名称、主机名、内核版本号、发布日期等信息。 Linux ubuntu 5.4.0-150-generic #167~18.04.1-Ubuntu SMP Wed May 24 00:51:42 UTC 2023 x86_64 x86_64 x86_64 GNU/Linux 内核版本&#xff1a;这是一个基于 Linux 的 Ubuntu 系…

智算中心动环监控:构建高效、安全的数字基础设施@卓振思众

在当今快速发展的数字经济时代&#xff0c;智算中心作为人工智能和大数据技术的核心支撑设施&#xff0c;正日益成为各行业实现智能化转型的重要基石。为了确保这些高性能计算环境的安全与稳定&#xff0c;卓振思众动环监控应运而生&#xff0c;成为智算中心管理的重要组成部分…

elastic search 向量检索的过程包括数据写入与查询

使用 Elasticsearch 的 `dense_vector` 字段类型,实现 Elasticsearch 中向量写入和向量检索查询。以下是一个完整的 Python 示例,展示了如何将数据写入 Elasticsearch 并进行向量检索查询。 ### 1. 安装依赖 首先,确保你已经安装了 `elasticsearch` 库: ```bash pip inst…

十七,Spring Boot 整合 MyBatis 的详细步骤(两种方式)

十七&#xff0c;Spring Boot 整合 MyBatis 的详细步骤(两种方式) 文章目录 十七&#xff0c;Spring Boot 整合 MyBatis 的详细步骤(两种方式)1. Spring Boot 配置 MyBatis 的详细步骤2. 最后&#xff1a; MyBatis 的官方文档&#xff1a;https://mybatis.p2hp.com/ 关于 MyBa…

nrf52840 arm_startup_nrf52840.s文件解析

在基于 Nordic nRF52840 芯片的开发中,arm_startup_nrf52840.s文件起着至关重要的作用,主要包括以下几个方面: 一、启动引导 初始化硬件 在芯片上电或复位后,该文件负责初始化处理器的基本硬件设置,如设置堆栈指针、初始化内存等。这确保了处理器在开始执行主要程序代码之…

Linux之实战命令02:shred应用实例(三十六)

简介&#xff1a; CSDN博客专家、《Android系统多媒体进阶实战》一书作者 新书发布&#xff1a;《Android系统多媒体进阶实战》&#x1f680; 优质专栏&#xff1a; Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a; 多媒体系统工程师系列【…