Vue3学习——标签的ref属性

  1. 在HTML标签上,可以使用相同的ref名称,得到DOM元素
  2. ref放在组件上时,拿到的是组件实例(组件defineExpose暴露谁,ref才可以看到谁)
<script setup lang="ts">
import RefPractice from '@/components/ref_practice.vue'
import {ref} from 'vue'
const practice = ref()
const chackRef = () =>{console.log(practice.value)
}
</script><template><RefPractice ref="practice" @click="chackRef"></RefPractice>
</template>

ref_practice.vue

<script setup lang="ts">
import {ref} from 'vue'const a= ref(1)
const b = ref(2)defineExpose({a}) // 只暴露a,所以父组件拿不到b</script><template><div class="refPractice"><div>ref标签</div></div></template>

在这里插入图片描述

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

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

相关文章

天锐绿盾 | 文件数据\资料防泄漏软件 \ 自动智能透明加密保护

怎么防止公司办公终端文件数据资料外泄? 防止公司办公终端文件数据资料外泄是非常重要的&#xff0c;以下是一些有效的措施&#xff1a; 限制访问权限&#xff1a;根据员工的职责和需求&#xff0c;设定文件和数据资料的访问权限。确保只有授权人员才能访问敏感信息。 加密存…

人声伴奏分离怎么搞?分享4个实用的工具!

在音乐制作和后期处理中&#xff0c;人声与伴奏的分离常常是一个复杂而精细的过程。随着科技的发展&#xff0c;现在市面上已经涌现出了一批高效且易于使用的人声伴奏分离工具&#xff0c;它们如同音乐制作人的得力助手&#xff0c;帮助我们将人声与伴奏完美分离&#xff0c;提…

使用Docker部署Docker-Compose-Ui工具并实现公网访问

文章目录 1. 安装Docker2. 检查本地docker环境3. 安装cpolar内网穿透4. 使用固定二级子域名地址远程访问 Docker Compose UI是Docker Compose的web界面。这个项目的目标是在Docker Compose之上提供一个最小的HTTP API&#xff0c;同时保持与Docker Compose CLI的完全互操作性。…

2024,深层互联第二代IndoorLink领夹式一对多讲解器面世!

新年之初&#xff0c;每一步都举足轻重。2024开年之际&#xff0c;资深讲解器厂家深层互联重磅推出第二代IndoorLink领夹式一对多讲解器&#xff0c;各项性能指标全线升级&#xff0c;成为新的行业标杆&#xff0c;一经面世即引起巨大反响。 2023年2月&#xff0c;首代IndoorL…

GitHub | 在 GitHub 上在线展示 Vue 项目

简洁版&#xff1a;上传所有代码 << 构建项目并上传 dist 目录 << 设置仓库 << 访问 Step1&#xff1a;在 GitHub 上新建仓库&#xff0c;并将 Vue 项目的代码 push 到该仓库中。坑点在于&#xff0c;如果你是从 GitHub 上 clone 的别人的项目&#xff0c;那…

安装unget包 sqlsugar时报错,完整的报错解决

前置 .net6的开发环境 问题 ? 打开unget官网&#xff0c;搜索报错的依赖Oracle.ManagedDataAccess.Core unget官网 通过unget搜索Oracle.ManagedDataAccess.Core查看该依赖的依赖 发现应该是需要的依赖Oracle.ManagedDataAccess.Core(>3.21.100)不支持.net6的环境 解…

k-means聚类、GMM高斯聚类、canopy聚类、DBSCAN聚类、FCM聚类、ISODATA聚类、k-medoid聚类、层次聚类、谱聚类 对比

k-means聚类、GMM高斯聚类、canopy聚类、DBSCAN聚类、FCM聚类、ISODATA聚类、k-medoid聚类、层次聚类、谱聚类 对比 标 代码获取代码获取代码获取代码获取代码获取代码获取代码获取代码获取代码获取代码获取题 GMM&#xff08;高斯混合模型&#xff09;是一种聚类算法&#xff…

Http改为Https后该如何测试

需要了解Http和Http之间的关系&#xff0c;他们之间都有哪些优点&#xff0c;哪些缺点&#xff0c;如果使用的产品进行了更改&#xff0c;该如何进行测试等等&#xff0c;Https提供了一个安全层&#xff08;SSL/TLS&#xff09;&#xff0c;这个安全层在客户端和服务器之间提供…

HCIA-HarmonyOS设备开发认证V2.0-IOT硬件子系统-GPIO

目录 一、GPIO 概述二、GPIO模块相关API三、实例四、GPIO HDF驱动开发4.1、LED驱动程序(待续...)4.2、LED驱动配置(待续...) 坚持就有收获 轻量系统设备通常需要进行外设控制&#xff0c;例如温湿度数据的采集、灯开关的控制&#xff0c;因此在完成内核开发后&#xff0c;需要进…

SpringBootWeb学习笔记——12万字详细总结!

0. 写在前面 注:这套笔记是根据黑马程序员B站2023-3-21的视频学习的成果,其中省略了前端基础部分、Maven部分和数据库基础部分,详情可见目录。 注注:目前文章内结尾处多幅图片加载不出来,因为图片还存在本地没被传上来,过段时间再改~ 所有的Spring项目都基于Spring Fra…

升级到PHP8.X的原因和方法

上周有一个使用Hostease美国主机服务器多年的客户&#xff0c;反馈需要升级到PHP8.x&#xff0c;原因是站点程序已升级&#xff0c;并希望站点运行在更高也稳定的PHP8.x上。在升级PHP8.x的过程中&#xff0c;联系我们并反馈在升级过程中遇到了问题&#xff0c;需求解决方案。 升…

雷池社区版WAF:开源护网,共筑网络安全长城

雷池社区版WAF&#xff08;Web Application Firewall&#xff09;是一款开源的网络应用防火墙&#xff0c;旨在为网站和网络应用提供安全防护&#xff0c;以抵御各种网络攻击&#xff0c;如SQL注入、跨站脚本攻击&#xff08;XSS&#xff09;、文件包含、以及其他常见的安全威胁…

Linux 常用命令100+

Linux 运维/开发/测试 常用命令100 线上查询及帮助命令(2个) 命令功能说明示例man 命令查看普通命令帮助&#xff0c;命令的词典&#xff0c;更复杂的还有info&#xff0c;但不常用。rootbrLinux ~]#man lshelp 命令查看Linux内置命令的帮助&#xff0c;比如cd命令。[rootbrL…

comsol燃料电池+锂离子电池

电化学仿真技术通过对电池微观行为进行研究&#xff0c;明晰电池内部多现象机理&#xff0c;并将其数值化&#xff0c;通过数值法实现对物理特征联合计算&#xff0c;建立完整的电池模型。COMSOL Multiphysics 具有强大的多物理场全耦合仿真分析功能、高效的计算性能&#xff0…

低代码中的工作流:简化开发流程,提升效率

低代码开发平台近年来在软件开发领域引起了广泛的关注和应用。它以提高开发效率、降低开发成本为目标&#xff0c;通过简化开发过程&#xff0c;使非专业开发者也能快速构建高品质的应用程序。其中&#xff0c;工作流引擎作为低代码开发平台的重要组成部分&#xff0c;对于提升…

文件上传漏洞--Upload-labs--Pass17--条件竞争

一、条件竞争原理&#xff08;结合代码审计&#xff09; 1、首先进行代码审计&#xff0c;查看源代码。 我们可知&#xff0c;将文件上传至服务器后&#xff0c;不会被立即删除&#xff0c;而是做短暂的停留&#xff0c;中间会有一小部分时间差&#xff0c;这部分时间差是代码…

华为OD机试真题C卷-篇4

200分值题 员工派遣快递员的烦恼符号运算伐木工反射计数分披萨推荐多样性贪心的歌手螺旋数组矩阵(100) 员工派遣 nums [int(x) for x in input().split(" ")] x nums[0] y nums[1] count_x nums[2] count_y nums[3] left 1 right pow(10, 9) while (True) :if…

vue 实现docx文件在线预览

预览请求步骤&#xff1a; 准备一个需要预览的文件地址【如:https://usdoc.cn/vw/文件模板.docx】GET 参数到请求地址将拼接好的地址放在浏览器中&#xff0c;开始预览 请求地址&#xff1a;https://vw.usdoc.cn/ 请求方式&#xff1a;GET 请求参数: 字段名称字段类型必填参数…

2024年单服务器部署Mongodb三节点副本集自动化部署脚本

该脚本是为了方便自己学习和工作中部署服务器从而节省时间进行编写&#xff0c;目前能正常部署&#xff0c;创建集群&#xff0c;管理员用户&#xff0c;以及连接都没问题&#xff0c;但是没有开启验证&#xff0c;后续找时间补充。 完整的教程请参考一下我写的技术文章。 20…

渲染效果图有哪几种分类?效果图为什么用云渲染更快

云渲染利用了集群化的云端服务器资源&#xff0c;通过并行计算充分发挥了高性能硬件的优势&#xff0c;显著提升了渲染的速度。这一技术特别适用于处理规模庞大或细节丰富的渲染任务&#xff0c;在缩短项目完成时间方面表现卓越。无论是用于为建筑提供精确的可视化效果图&#…