【Vue3】深入理解Vue中的ref属性

💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临,让我们一起踏上这个知识之旅!
请添加图片描述

文章目录

  • 🍋什么是ref?
  • 🍋标签的ref属性
  • 🍋扩展
  • 🍋注意事项
  • 🍋总结

🍋什么是ref?

ref是Vue提供的一个特殊属性,用来在模板或组件中给子元素或组件注册引用信息。这个引用信息可以是一个指向DOM元素或组件实例的引用,通过这个引用,我们可以直接操作对应的DOM元素或组件实例

🍋标签的ref属性

准备好初始代码

<template><div class="person"><h2>馒头</h2><button @click="showLog">输出h2这个元素</button>
</div></template><script lang="ts" setup name="Person11">function showLog(){console.log()}</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 5px;}</style>

我们想要输出h2这个元素,应该怎么做,我们可以选择使用JS
在这里插入图片描述
在这里插入图片描述

但是在实际工作中,这样的做法并不可取,原因是怕冲突(不同组件间id相同)
如果我们想解决一下,使用ref

<template><div class="person"><h2 ref="a">馒头</h2>  //替换成ref<button @click="showLog">输出h2这个元素</button>
</div></template><script lang="ts" setup name="Person11">import {ref} from 'vue'let a = ref() //用于存储ref标记的内容function showLog(){console.log(a.value)}</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 5px;}</style>

之前我们都是在html中使用ref,那么是否在组件中也同样适用呢

<template><button @click="showLog">输出</button>
<person ref="ren"></person>
</template>
<script lang='ts' setup name="App">import person from './components/person.vue'import {ref} from 'vue'let ren = ref()function showLog(){console.log(ren.value)}
</script>

这样输出的就是组件实例
在这里插入图片描述

🍋扩展

defineExpose是Vue 3中一个用于向父组件公开组件内部方法或属性的函数。在Vue 3中,组件的内部状态和方法默认是私有的,只能在组件内部使用。但是有时候我们希望将一些方法或属性暴露给父组件使用,这时就可以使用defineExpose。


导入方式

import { defineExpose } from 'vue'

注意:需要注意的是,defineExpose只能在script setup中使用,而且需要在script setup中的其他代码之前调用,以确保能正确暴露组件的属性和方法。

🍋注意事项

使用ref需要注意以下几点:

避免在模板中过多使用ref,因为ref会增加组件的耦合度,使得组件难以复用和测试。
如果可能,尽量在mounted生命周期钩子中使用ref,以确保在DOM元素或组件实例完全渲染后再获取引用。
在Vue 3中,使用ref获取组件实例时,需要使用.value来访问实例

总的来说,ref是一个非常有用的特性,可以帮助我们更方便地操作DOM元素或组件实例。但是在使用时,需要谨慎考虑其对组件的影响,避免滥用

🍋总结

总结一下* 用在普通DOM标签上,获取的是DOM节点。用在组件标签上,获取的是组件实例对象。

请添加图片描述

挑战与创造都是很痛苦的,但是很充实。

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

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

相关文章

Redis 之三:Redis 的发布订阅(pub/sub)

概念介绍 Redis 发布订阅 (pub/sub) 是一种消息通信模式&#xff0c;它允许客户端之间进行异步的消息传递 Redis 客户端可以订阅任意数量的频道。 模型中的角色 在该模型中&#xff0c;有三种角色&#xff1a; 发布者&#xff08;Publisher&#xff09;&#xff1a;负责发送信…

嵌入式中7个底层数据结构分解

在编程的世界里&#xff0c;数据结构是构建信息框架的骨架。就像现实生活中的建筑需要精心设计的结构一样&#xff0c;我们的数据也需要合适的结构来保证程序的高效和稳定。今天&#xff0c;我们就像探险家一样&#xff0c;一起去探索七大数据结构的奥秘&#xff0c;并揭开它们…

光路科技:工业以太网交换机引领工业互联网新篇章

随着全球范围内工业4.0的浪潮不断涌动&#xff0c;工业互联网作为其核心驱动力&#xff0c;正引领着工业生产向智能化、网络化的崭新阶段迈进。在这一转型的浪潮中&#xff0c;光路科技凭借其卓越的工业互联设备与创新解决方案&#xff0c;正为工业互联网领域的发展注入新的活力…

Linux环境基础开发工具使用

目录 1.Linux软件包管理器yum 什么是软件包 关于 lrzsz 查看软件包 2.Linux开发工具 2.1.vim的基本概念 2.2vim的基本操作 2.3vim命令模式命令集 1.插入模式 2.从插入模式切换为命令模式 3.移动光标 4.删除文字 5.复制 6.替换 7.撤销上一次的操作 8.更改 2.4v…

[动态规划]---part1

前言 作者&#xff1a;小蜗牛向前冲 专栏&#xff1a;小蜗牛算法之路 专栏介绍&#xff1a;"蜗牛之道&#xff0c;攀登大厂高峰&#xff0c;让我们携手学习算法。在这个专栏中&#xff0c;将涵盖动态规划、贪心算法、回溯等高阶技巧&#xff0c;不定期为你奉上基础数据结构…

Linux设备模型(九) - bus/device/device_driver/class

一&#xff0c;设备驱动模型 1&#xff0c;概述 在前面写的驱动中&#xff0c;我们发现编写驱动有个固定的模式只有往里面套代码就可以了&#xff0c;它们之间的大致流程可以总结如下&#xff1a; 实现入口函数xxx_init()和卸载函数xxx_exit() 申请设备号 register_chrdev_r…

Spring源码:手写SpringDI

我们是在实现了SpringIOC的基础上&#xff0c;进行拓展&#xff0c;IOC实现源码可以查看&#xff1a;手写SpringIOC 文章目录 一、分析二、实现1、构造注入1&#xff09;分析2&#xff09;版本1BeanReferenceBeanDefinitionGenericBeanDefinitionDefaultBeanFactory1、改造构造…

ES入门六:Suggesters Api实践

都是负担在很多app上&#xff0c;当我们输入某些内容时候&#xff0c;它会立即做一些补全操作&#xff0c;如果我想实现上述的需求&#xff0c;我们就可以使用ES提供的Suggesters Api。那Suggesters是如何做到的那&#xff1f;简单来说&#xff0c;Suggesters会将输入的文本拆分…

【网站项目】167固定资产管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

谁才是“内卷”之王?众多洗地机品牌哪家清洁力最强?清洁最干净?

在如今快节奏的生活中&#xff0c;家庭清洁工作愈发显得繁琐而耗时。添可洗地机凭借其高效的一体化清洁功能和智能化操作&#xff0c;为现代家庭生活带来了极大的便利。面对众多款品牌洗地机型号&#xff0c;消费者不禁会问&#xff1a;哪家洗地机清洁力最强&#xff1f;在性能…

解决tomcat双击startup.bat一闪而过的问题

这种问题可能是tomcat找不到你的jdk环境配置路径 1、首先在tomcat的bin文件夹找到startup.bat 和catalina.bat两个文件 2、startup.bat用记事本打开 在末尾添加pause 3、保存修改&#xff0c;双击startup.bat如果出现这种问题&#xff0c;就是找不到jdk路径 4、用记事本打开ca…

STM32CubeMX实战教程: TIM6、TIM7 - 基本定时器

目录 一、基本定时器的作用 二、常用型号的TIM时钟频率 三、CubeMX配置 四、编写执行代码 一、基本定时器的作用 基本定时器&#xff0c;主要用于实现定时和计数功能。作用包括&#xff1a; 定时功能&#xff1a;可以产生周期性的中断&#xff0c;用于实现定时任务。例如&…

什么是Docker容器?

Docker是一种轻量级的虚拟化技术&#xff0c;同时是一个开源的应用容器运行环境搭建平台&#xff0c;可以让开发者以便捷方式打包应用到一个可移植的容器中&#xff0c;然后安装至任何运行Linux或Windows等系统的服务器上。相较于传统虚拟机&#xff0c;Docker容器提供轻量化的…

linux安装mysql5.7

linux安装mysql5.7 一、下载mysql5.7二、解压包介绍三、上传包到linux四、卸载mariadb五、安装mysql六、修改权限七、启动mysql八、使用过navicat创作不易&#xff0c;笔记不易&#xff0c;如觉不错&#xff0c;请三连&#xff0c;谢谢~~ 一、下载mysql5.7 去mysql官方下载&am…

MES系统在离散制造企业中的功能解析

随着信息技术的快速发展和制造业的转型升级&#xff0c;MES在离散制造企业中的作用日益凸显。MES系统不仅提高了生产效率和产品质量&#xff0c;还优化了资源配置&#xff0c;增强了企业的市场竞争力。 一、生产管理功能 MES系统能够实时监控生产现场的各种数据&#xff0c;包…

二叉搜索树题目:将有序数组转换为二叉搜索树

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法思路和算法证明代码复杂度分析 题目 标题和出处 标题&#xff1a;将有序数组转换为二叉搜索树 出处&#xff1a;108. 将有序数组转换为二叉搜索树 难度 4 级 题目描述 要求 给定整数数组 nums \texttt{nums}…

15 easy 141. 环形链表

法1&#xff1a;快慢指针法&#xff1a; //给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 // // 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内部使用整数…

Python爬虫副业真的可行吗?

首先回答你&#xff0c;是可行的&#xff0c;python爬虫能当副业&#xff0c;副业的方式比较多&#xff0c;等下我会讲几种。 那学到哪个层次可以接单呢&#xff1f;主要看你是接什么样的单&#xff0c;爬一些资料&#xff0c;视频这种简单的学一两个月就没什么问题&#xff0…

第一天 走进Docker的世界

第一天 走进Docker的世界 介绍docker的前世今生&#xff0c;了解docker的实现原理&#xff0c;以Django项目为例&#xff0c;带大家如何编写最佳的Dockerfile构建镜像。通过本章的学习&#xff0c;大家会知道docker的概念及基本操作&#xff0c;并学会构建自己的业务镜像&…

一文读懂Persistence One- 如何将Restaking带入Cosmos

Persistence One正在将Restaking引入Cosmos。用户将能够通过pSTAKE、Stride、Quicksilver和Milkyway将Liquid Staked Tokens&#xff08;如ATOM、TIA、DYDX等&#xff09;存入Persistence One&#xff0c;对其进行Restaking&#xff0c;从而安全地连接更多区块链&#xff0c;首…