Vue3:标签的ref属性用法

一、情景说明

我们在写前端页面的时候,肯定会遇到获取DOM内容的情况。
以往,我们是用原生的js方法去获取,如document.getXxxx
但是,这中方法会有个问题,如果父组件和子组件的id相同,则会出错。

Vue3中,我们使用ref来获取DOM内容
从而避免这个问题
同时,可以用ref获取组件实例

二、案例

1、用在原生DOM上

标记

<h2 ref="title2">北京</h2>

获取

	import {ref,defineExpose} from 'vue'

    // 创建一个title2,用于存储ref标记的内容
    let title2 = ref()

暴露变量

defineExpose({title2})	//多个用逗号隔开

2、用在组件标签上

标记

<Person ref="ren"/>

获取

let ren = ref()

ren变量结构,子组件暴露的变量title2位置
在这里插入图片描述

三、总结

  • 用在普通DOM标签上,获取的是DOM节点。
  • 用在组件标签上,获取的是组件实例对象。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/465897.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Unity游戏项目接广告

Unity游戏项目中接入GoogleAdMob 先看效果图 接入测试横幅广告&#xff0c;代码如下&#xff1a; using System.Collections; using System.Collections.Generic; using UnityEngine; using GoogleMobileAds.Api; using System;public class GoogleAdMobManager : MonoBehavi…

观察者模式的理解和引用

1.前言 在之前的H5小游戏中&#xff0c;对于长连接发送的不同类型数据包的处理&#xff0c;是通过switch语句进行处理的&#xff0c;于是在自己的代码中出现了大量的case分支&#xff0c;不方便进行维护和后期的版本迭代。于是在老师的指导下&#xff0c;开始寻求使用观察者模…

【深度学习】滴滴出行-交通场景目标检测

案例5&#xff1a;滴滴出行-交通场景目标检测 相关知识点&#xff1a;目标检测、开源框架的配置和使用&#xff08;mmdetection, mmcv&#xff09; 1 任务目标 1.1 任务和数据简介 本次案例将使用深度学习技术来完成城市交通场景下的目标检测任务&#xff0c;案例所使用的数…

CentOS7 安装ErLang语言环境

在线搜索适合当前linux系统的epel在线安装。 yum -y install epel-release下载erlang-solutions安装包。 wget https://packages.erlang-solutions.com/erlang-solutions-1.0-1.noarch.rpm离线安装erlang-solutions安装包。 rpm -Uvh erlang-solutions-1.0-1.noarch.rpm在线…

项目性能优化—使用JMeter压测SpringBoot项目

项目性能优化—使用JMeter压测SpringBoot项目 我们的压力测试架构图如下&#xff1a; 配置JMeter 在JMeter的bin目录&#xff0c;双击jmeter.bat 新建一个测试计划&#xff0c;并右键添加线程组&#xff1a; 进行配置 一共会发生4万次请求。 ctrl s保存&#xff1b; 添加h…

Aigtek电压放大器的作用及优点是什么

电压放大器是电子技术领域中重要的设备&#xff0c;其作用是将输入信号的电压放大到所需的输出电压水平。电压放大器具有多种优点&#xff0c;下面安泰电子将详细介绍其作用及主要优点。 电压放大器的主要作用是增加信号的电压幅值。通过放大信号的电压&#xff0c;可以增强信号…

网络架构层_服务器上下行宽带

网络架构层_服务器上下行宽带 解释一 云服务器ECS网络带宽的概念、计费、安全及使用限制_云服务器 ECS(ECS)-阿里云帮助中心 网络带宽是指在单位时间&#xff08;一般指的是1秒钟&#xff09;内能传输的数据量&#xff0c;带宽数值越大表示传输能力越强&#xff0c;即在单位…

就业班 2401--3.13 走进网络

走进网络 长风破浪会有时&#xff0c;直挂云帆济沧海。 1.认识计算机 1.计算机网络是由计算机和通讯构成的&#xff0c;网络研究的是“通信”。 ------1946 世界上第一台计算机 2.终端&#xff1a;只有输入和输出功能&#xff0c;没有计算和处理功能。 3.数据&#xff1a;一串…

深入浅出Go的`encoding/xml`库:实战开发指南

深入浅出Go的encoding/xml库&#xff1a;实战开发指南 引言基本概念XML简介Go语言中的XML处理结构体标签&#xff08;Struct Tags&#xff09; 解析XML数据使用xml.Unmarshal解析XML结构体标签详解处理常见解析问题 生成XML数据使用xml.Marshal生成XML使用xml.MarshalIndent优化…

Linux服务器磁盘更改挂载目录

linux服务器磁盘弹性扩容时&#xff0c;会出现没有挂载到理想的目录下&#xff0c;这时候就需要通过命令从新挂载目录&#xff0c;以下示例是把默认挂载目录/home更改为/data 1,df -lh ####查看现有挂载信息 2.lsblk ###查看文件形式&#xff0c;确保原有数据盘文件结构。 3.…

团队如何限制合适的在制品(WIP)数量?

看板之父David Anderson曾说过“看板的本质是一个很朴素的思想&#xff1a;在制品必须被限制。”但对于团队来说&#xff0c;确定一个合适的在制品限制可能是件棘手的事。 在《看板快速启动指南》一文中&#xff0c;我们已经初步了解如何打造一个看板&#xff0c;今天我们来一…

java学习之路-方法讲解

目录 1.方法概念及使用 1.1什么是方法 1.2方法定义 1.3 方法调用的执行过程 1.4 实参和形参的关系(重要) 1.5 没有返回值的方法 2.方法重载 3.方法递归 3.1递归概念 3.2递归执行过程分析 3.3递归练习 代码示例1 代码示例2 1.方法概念及使用 1.1什么是方法 方法就是…

jetson nano——编译一些包的网址导航,pyside2,qt(持续更新)

目录 1.PySide2下载地址2.tesserocr下载地址3.Qt下载地址4.OpenSSL官网5.latex编译器下载地址5.1MikTex5.2TeX Live 1.PySide2下载地址 https://download.qt.io/official_releases/QtForPython/pyside2/ 如下图&#xff1a; 2.tesserocr下载地址 https://github.com/simonflue…

python网络编程:通过socket实现TCP客户端和服务端

目录 写在开头 socket服务端&#xff08;基础&#xff09; socket客户端&#xff08;基础&#xff09; 服务端实现&#xff08;可连接多个客户端&#xff09; 客户端实现 数据收发效果 写在开头 近期可能会用python实现一些网络安全工具&#xff0c;涉及到许多关于网络…

PythonWeb——Django框架

框架介绍 1.什么是框架? 框架就是程序的骨架&#xff0c;主体结构&#xff0c;也是个半成品。 2.框架的优缺点 可重用、成熟,稳健、易扩展、易维护 3.Python中常见的框架 大包大揽 Django被官方称之为完美主义者的Web框架。力求精简web.py和Tornado新生代微框架Flask和B…

hadoop分布式环境ssh设置免密登陆之后目标主机更换无法连接解决

在进行hadoop分布式环境搭建时&#xff08;三台机&#xff0c;master&#xff0c;slave1&#xff0c;slave2&#xff09;&#xff0c;后期slave2系统出现问题&#xff0c;更换新机后&#xff0c;master与slave2文件传输失败&#xff1a; 以为是秘钥过期的问题&#xff0c;更换…

【Linux】一文解决如何在终端查看 python解释器 的位置

【Linux】一文解决如何在终端查看 python解释器 的位置 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希望得到您的订阅…

Github主页设置贪吃蛇详细教程

先看最终实现结果&#xff1a; 有条贪吃蛇放在主页还是蛮酷的哈哈哈。接下来我来讲一讲怎么在Github主页添加一条贪吃蛇。 首先要修改自己的Github的主页&#xff0c;我们得有一个特殊的仓库——这个仓库必须与你的Github用户名保持一致&#xff0c;并且需要公开&#xff0c…

静默快速安装oracle 19c

静默快速安装oracle 19c 1.配置yum源 1.配置网络yum源 1.删除redhat7.0系统自带的yum软件包&#xff1b; rpm -qa|grep yum >oldyum.pkg 备份原信息rpm -qa|grep yum|xargs rpm -e --nodeps 不检查依赖&#xff0c;直接删除rpm包 1232.自行下载所需要的软件包。包名会…

求解3、4、6自由度仿射变换矩阵

说明&#xff1a;一开始将目光放在了opencv上&#xff0c;发现只有4、6自由度的仿射变换求解&#xff0c;后来发现skimage十分强大。 注&#xff1a;美中不足的是&#xff0c;skimage的实现没有RANSAC。 function&#xff1a;skimage.transform.estimate_transform() ttypeeu…