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

给子组件传递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());  
})

相关文章:

  • OJ在线评测系统 前端创建题目(增) 更新题目(改) 题目列表(查) 以及做题页面的开发 基于VUECLI脚手架画界面
  • Docker部署MongoDB教程
  • Spring 事务管理-AOP
  • python学习-13【网络编程】
  • SBB Usage Parameters
  • Supervision 计算机视觉工具
  • 【网络安全】网络基础第一阶段——第四节:网络协议基础---- VRRP与网络架构设计
  • 基站定位与Wi-Fi定位?看这篇就够了
  • C++——认识STL及使用及实现第一个容器string
  • 关于若依前端界面缓存问题
  • 【Tomcat】常见面试题整理 共34题
  • Docker本地部署Chatbot Ollama搭建AI聊天机器人并实现远程交互
  • 如何在 macOS 上恢复未保存的 Excel 文件 – 文件恢复的最佳方法
  • IP地址与智能家居能够碰撞出什么样的火花呢?
  • more、less 命令:阅读文本
  • @jsonView过滤属性
  • [js高手之路]搞清楚面向对象,必须要理解对象在创建过程中的内存表示
  • 【391天】每日项目总结系列128(2018.03.03)
  • 【剑指offer】让抽象问题具体化
  • Docker容器管理
  • ECMAScript 6 学习之路 ( 四 ) String 字符串扩展
  • JavaScript DOM 10 - 滚动
  • Js实现点击查看全文(类似今日头条、知乎日报效果)
  • js正则,这点儿就够用了
  • Kibana配置logstash,报表一体化
  • PHP 7 修改了什么呢 -- 2
  • Promise初体验
  • Spring核心 Bean的高级装配
  • SQL 难点解决:记录的引用
  • vue.js框架原理浅析
  • vue2.0一起在懵逼的海洋里越陷越深(四)
  • WebSocket使用
  • 高性能JavaScript阅读简记(三)
  • 回顾2016
  • 回流、重绘及其优化
  • 记录一下第一次使用npm
  • 理解 C# 泛型接口中的协变与逆变(抗变)
  • 原生JS动态加载JS、CSS文件及代码脚本
  • Python 之网络式编程
  • 蚂蚁金服CTO程立:真正的技术革命才刚刚开始
  • #etcd#安装时出错
  • #Java第九次作业--输入输出流和文件操作
  • #LLM入门|Prompt#1.8_聊天机器人_Chatbot
  • $forceUpdate()函数
  • %3cli%3e连接html页面,html+canvas实现屏幕截取
  • (11)工业界推荐系统-小红书推荐场景及内部实践【粗排三塔模型】
  • (23)Linux的软硬连接
  • (32位汇编 五)mov/add/sub/and/or/xor/not
  • (4)STL算法之比较
  • (C++20) consteval立即函数
  • (PHP)设置修改 Apache 文件根目录 (Document Root)(转帖)
  • (二)pulsar安装在独立的docker中,python测试
  • (二)PySpark3:SparkSQL编程
  • (经验分享)作为一名普通本科计算机专业学生,我大学四年到底走了多少弯路
  • (五)Python 垃圾回收机制