vue3标签中的ref属性如何使用$refs获取元素

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

用在普通DOM标签中

获取dom元素方法一:

  1. 在需要获取的元素标签上添加ref属性

  2. 创建ref对象,存储ref属性标记的内容

  3. 通过ref上的value属性即可获取当前dom元素

    {{ person.name }}

    {{ person.age }}

    {{ person.gender }}

获取dom元素方法二:

getCurrentInstance():获取当前组件实例

  1. 在需要获取的元素标签上添加ref属性

  2. 通过getCurrentInstance解构出proxy

  3. 通过proxy.$refs.xxx即可获取当前dom元素

    {{ person.name }}

    {{ person.age }}

    {{ person.gender }}

用在组件标签上

defineExpose作用:向外暴露属性

<!-- 父组件 -->       
<template>       <Demo ref="demoRef"></Demo>       
</template>       <script setup>       
import { ref, onMounted } from "vue";       
import Demo from "./components/Demo.vue";       let demoRef = ref();       onMounted(() => {       console.log(demoRef.value);  // 访问子组件Demo中的属性
});
</script>       <!-- 子组件 -->       
<template>       <p>{{ person.name }}</p>       <div>{{ person.age }}</div>       <p>{{ person.gender }}</p>       
</template>       <script setup>       
import { ref, reactive, computed, getCurrentInstance, onMounted } from "vue";const person = reactive({  name: "neko", age: 18,gender: "女",
});let num1 = ref(0);
let num2 = ref(1);
let num3 = ref(2);<!-- 使用defineExpose将组件中的数据交给外部,这样父组件中的demoRef.value才可以访问到如下数据 -->
defineExpose({ num1, num2, num3, person });
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

保护模式基本概念

CPU 架构 RISC&#xff08;Reduced Instruction Set Computer&#xff09; 中文即"精简指令集计算机”。RISC构架的指令格式和长度通常是固定的&#xff08;如ARM是32位的指令&#xff09;、且指令和寻址方式少而简单、大多数指令在一个周期内就可以执行完毕 CISC&…

62.基于SpringBoot + Vue实现的前后端分离-驾校预约学习系统(项目+论文)

项目介绍 伴随着信息技术与互联网技术的不断发展&#xff0c;人们进到了一个新的信息化时代&#xff0c;传统管理技术性没法高效率、容易地管理信息内容。为了实现时代的发展必须&#xff0c;提升管理高效率&#xff0c;各种各样管理管理体系应时而生&#xff0c;各个领域陆续进…

【零基础保姆级教程】制作自己的数据集(二)——Labelme的安装与使用及常见的报错解决方法

前段时间安装了Labelimg&#xff0c;网上有些博客写着Labelme能进行语义分割的标注&#xff0c;但UI窗口就那么大找不着选项&#xff0c;只能打矩形框&#xff0c;为了能够标注自己的分割数据集&#xff0c;遂写下该教程以供参考。 采用Labelimg进行目标检测标注的教程如下。 …

详解磁盘IO、网络IO、零拷贝IO、BIO、NIO、AIO、IO多路复用(select、poll、epoll)

1、什么是I/O 在计算机操作系统中&#xff0c;所谓的I/O就是输入&#xff08;Input&#xff09;和输出&#xff08;Output&#xff09;&#xff0c;也可以理解为读&#xff08;Read&#xff09;和写&#xff08;Write)&#xff0c;针对不同的对象&#xff0c;I/O模式可以划分为…

无人设备遥控器之定向天线篇

一、定义与功能 定向天线&#xff0c;顾名思义&#xff0c;是通过改变天线的辐射方向&#xff0c;实现信号发射、接收和增强的天线。它可以让信号以更高的功率、更远的距离传输到指定区域&#xff0c;同时也能够降低与周围天线之间的干扰。在无人设备遥控器中&#xff0c;定向天…

老旧小区用电安全保护装置#限流式防火保护器参数介绍#

摘要 随着居民住宅区用电负荷的增加&#xff0c;用电安全问题日益突出&#xff0c;火灾隐患频繁发生。防火限流式保护器作为一种新型电气安全设备&#xff0c;能够有效预防因电气故障引发的火灾事故。本文介绍了防火限流式保护器的工作原理、技术特点及其在居民住宅区用电系统…

dify的ChatFlow自定义上传图片并通过HTTP请求到SpringBoot后端

前情提要 交互场景&#xff1a;dify的ChatFlow上传文件(本示例是单张图片)&#xff0c;通过HTTP请求至SpringBoot后端dify版本&#xff1a;0.13.2python版本&#xff1a;3.12.7 1. 自定义上传变量 在【开始】节点自定义变量单文件上传变量file 2. 下接HTTP请求节点 BODY要…

【幼儿园识物】比大小启蒙资料PDF

下载链接::huanxigou-uihttp://yiwub.natapp1.cc/zyweb/#/source/viewPdf?id9

帧缓存的分配

帧缓存实际上就是一块内存。在 Android 系统中分配与回收帧缓存&#xff0c;使用的是一个叫 ION 的内核模块&#xff0c;App 使用 ioctl 系统调用后&#xff0c;会在内核内存中分配一块符合要求的内存&#xff0c;用户态会拿到一个 fd&#xff08;有的地方也称之为 handle&…

SDMTSP:黑翅鸢算法(Black-winged kite algorithm,BKA)求解单仓库多旅行商问题,可以更改数据集和起点(MATLAB代码)

一、黑翅鸢算法BKA 黑翅鸢算法&#xff08;Black-winged kite algorithm&#xff0c;BKA&#xff09;由Wang Jun等人于2024年提出&#xff0c;该算法受黑翅鸢的迁徙和掠食行为启发而得。BKA集成了柯西突变策略和领导者策略&#xff0c;增强了算法的全局搜索能力&#xff0c;提…

【Python】基础语法介绍

目录 一、标识符和关键字 二、注释 三、缩进 四、输入和输出 五、字符串操作 六、基本数据类型 七、复合数据类型 7.1 列表 7.2 元组 7.3 字典 7.4 集合 八、数据类型转换 九、运算符 8.1 算术运算符 8.2 比较运算符 8.3 赋值运算符 8.4 位运算符 8.5 逻辑运…

stm32定时器输出比较----驱动步进电机

定时器输出比较理论 OC(Output Compare)输出比较输出比较可以通过比较CNT与CCR寄存器值的关系,来对输出电平进行置1、置0或翻转的操作,用于输出一定频率和占空比的PWM波形每个高级定时器和通用定时器都拥有4个输出比较通道高级定时器的前3个通道额外拥有死区生成和互补输出…

【NLP 17、NLP的基础——分词】

我始终相信&#xff0c;世间所有的安排都有它的道理&#xff1b;失之东隅&#xff0c;收之桑榆 —— 24.12.20 一、中文分词的介绍 1.为什么讲分词&#xff1f; ① 分词是一个被长期研究的任务&#xff0c;通过了解分词算法的发展&#xff0c;可以看到NLP的研究历程 ② 分词…

Rust 在前端基建中的使用

摘要 随着前端技术的不断发展&#xff0c;前端基础设施&#xff08;前端基建&#xff09;的建设已成为提升开发效率、保障产品质量的关键环节。然而&#xff0c;在应对复杂业务场景与高性能需求时&#xff0c;传统的前端技术栈逐渐暴露出诸多不足。近年来&#xff0c;Rust语言…

谷歌浏览器的网络连接问题解决方案

在数字化时代&#xff0c;网络浏览器已成为日常工作和生活中不可或缺的工具。谷歌浏览器以其快速、稳定和丰富的功能深受用户喜爱。然而&#xff0c;就像其他软件一样&#xff0c;谷歌浏览器也可能遇到网络连接问题&#xff0c;这可能由多种因素引起。本文将为您提供一系列解决…

【Unity3D】Particle粒子特效或3D物体显示在UGUI上的方案

目录 一、RawImage Camera RenderTexture方式 &#xff08;1&#xff09;扩展知识&#xff1a;实现射线检测RawImage内的3D物体 &#xff08;2&#xff09;扩展知识&#xff1a;实现粒子特效显示RawImage上 二、UI摄像机 Canvas(Screen Space - Camera模式)方式 &#…

14-zookeeper环境搭建

0、环境 java&#xff1a;1.8zookeeper&#xff1a;3.5.6 1、下载 zookeeper下载点击这里。 2、安装 下载完成后解压&#xff0c;放到你想放的目录里。先看一下zookeeper的目录结构&#xff0c;如下图&#xff1a; 进入conf目录&#xff0c;复制zoo_sample.cfg&#xff0…

精准提升:从94.5%到99.4%——目标检测调优全纪录

&#x1f680; 目标检测模型调优过程记录 在进行目标检测模型的训练过程中&#xff0c;我们面对了许多挑战与迭代。从初始模型的训练结果到最终的调优优化&#xff0c;每一步的实验和调整都有其独特的思路和收获。本文记录了我在优化目标检测模型的过程中进行的几次尝试&#…

贪心算法(三)

目录 一、k次取反后最大化的数组和 二、优势洗牌 三、最长回文串 四、增减字符串匹配 一、k次取反后最大化的数组和 k次取反后最大化的数组和 贪心策略&#xff1a; 解题代码&#xff1a; class Solution { public:int largestSumAfterKNegations(vector<int>&am…

基于Springboot的在线问卷调查系统【附源码】

基于Springboot的在线问卷调查系统 效果如下&#xff1a; 系统主页面 问卷列表页面 个人中心页面 系统登陆页面 管理员主页面 问卷管理页面 研究背景 随着互联网技术的飞速发展&#xff0c;传统的问卷调查方式因其时间和地点的限制&#xff0c;难以高效地收集到足够的数据。…