【第二十一篇】Vue中的ref和$refs

【第二十一篇】Vue中的ref和$refs在 Vue 中一般很少会用到直接操作 DOM 但不可避免有时候需要用到 这时我们可以通过 ref 和 refs 这两个来实现 本文我们就来详细的介绍下这个内容 ref ref 被用来给元素或子组件注册引用信息 引用信息将会注册在父组件的 refs 对象上 如果是在普通的 DOM 元素上使用 引用指向的就是 DOM 元素 如果是在子组件上 引用就指向组件的实例 refs refs 是一个对

在这里插入图片描述

  在Vue中一般很少会用到直接操作DOM,但不可避免有时候需要用到,这时我们可以通过ref和$refs这两个来实现,本文我们就来详细的介绍下这个内容

ref

   ref 被用来给元素或子组件注册引用信息, 引用信息将会注册在父组件的 $refs 对象上,如果是在普通的DOM元素上使用,引用指向的就是 DOM 元素,如果是在子组件上,引用就指向组件的实例。

$refs

   $refs 是一个对象,持有已注册过 ref 的所有的子组件。

具体演示

1.基础代码

  先来准备案例基础代码,如下

 
    DOCTYPE html> <
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/202270.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月20日 上午7:31
下一篇 2026年3月20日 上午7:31


相关推荐

  • java list详解_java集合List解析[通俗易懂]

    java list详解_java集合List解析[通俗易懂]作为一个Developer,Java集合类是我们在工作中运用最多的、最频繁的类。相比于数组(Array)来说,集合类的长度可变,更加适合于现代开发需求;Java集合就像一个容器,可以存储任何类型的数据,也可以结合泛型来存储具体的类型对象。在程序运行时,Java集合可以动态的进行扩展,随着元素的增加而扩大。在Java中,集合类通常存在于java.util包中。Java集合主要由2大体系构成,分别是C…

    2022年7月9日
    21
  • mysql时区重启后失效_mysql时区问题

    mysql时区重启后失效_mysql时区问题背景插入 timestamp 类型与 datetime 类型数据比预计结果早 14 小时原因如果说相差 8 小时不够让人惊讶 那相差 13 小时可能会让很多人摸不着头脑 出现这个问题的原因是 JDBC 与 MySQL 对 CST 时区协商不一致 因为 CST 时区是一个很混乱的时区 有四种含义 美国中部时间 CentralStand USA UTC 05 00 或 UTC 06 00 澳大利亚中部时间 Cen

    2025年9月29日
    5
  • 解密excel文件打开密码「建议收藏」

    解密excel文件打开密码「建议收藏」excel文件带有打开密码,忘记了密码或者是不知道密码的情况下,想要打开文件是需要解密工具帮助的,因为需要找到正确的密码才能够打开文件,其他方法好像还没办法成功解决文件打开密码。解密工具:【EXCEL解密大师】快速找回密码_轻松移除使用限制-奥凯丰okfone打开软件,选择【找回密码】功能,将文件添加进去,选择一个找回方法,点击【开始】之后等待软件找回密码关于找回方法:组合激活成功教程、掩码激活成功教程:适用于可以提供密码信息的情况,这两种方法可以根据密码信息更快速的找回密码,六位数及一下的密码,十分钟

    2022年6月28日
    30
  • [译] Android 生命周期备忘录 — 第三部分:Fragments

    [译] Android 生命周期备忘录 — 第三部分:Fragments

    2021年7月4日
    79
  • 详解机器学习中的数据处理(一)——缺失值处理(附完整代码)

    详解机器学习中的数据处理(一)——缺失值处理(附完整代码)摘要 在机器学习中 我们的数据集往往存在各种各样的问题 如果不对数据进行预处理 模型的训练和预测就难以进行 这一系列博文将介绍一下机器学习中的数据预处理问题 以 UCI 数据集为例详细介绍缺失值处理 连续特征离散化 特征归一化及离散特征的编码等问题 同时会附上处理的 Matlab 程序代码 这篇博文先介绍缺失值的处理 要点如下 处理缺失值的方法 读取数据集文件 查找 替换缺失数据

    2025年11月21日
    5
  • 笔记总结-相机标定(Camera calibration)原理、步骤

    笔记总结-相机标定(Camera calibration)原理、步骤      这已经是我第三次找资料看关于相机标定的原理和步骤,以及如何用几何模型,我想十分有必要留下这些资料备以后使用。这属于笔记总结。1.为什么要相机标定?      在图像测量过程以及机器视觉应用中,为确定空间物体表面某点的三维几何位置与其在图像中对应点之间的相互关系,必须建立相机成像的几何模型,这些几何模型参数就是相机参数。2.什么叫相机标定?       在大多数条件下这些参数必须通…

    2022年5月28日
    94

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号