【Vue3】标签的 ref 属性

【Vue3】标签的 ref 属性

  • 背景
  • 简介
  • 开发环境
  • 开发步骤及源码

背景

随着年龄的增长,很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来,技术出身的人总是很难放下一些执念,遂将这些知识整理成文,以纪念曾经努力学习奋斗的日子。本文内容并非完全原创,大多是参考其他文章资料整理所得,感谢每位技术人的开源精神。

简介

本文介绍 Vue3 中如何使用标签的 ref 属性。

传统开发中通常使用 document.getElementById() 获取标签对应的 DOM 元素,如果页面中多个 DOM 元素使用相同的 ID 进行标识,则使用 document.getElementById() 可能获取非目标 DOM 元素。Vue 提供了标签的 ref 属性解决此问题。

开发环境

分类名称版本
操作系统WindowsWindows 11
IDEVisual Studio Code1.91.1

开发步骤及源码

1> 创建 Vue3 工程,参考:【Vue3】工程创建及目录说明。

2> 删除 src 目录下 assetscomponents 目录。

3> 修改 src 目录下 main.ts

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

4> 自定义功能组件。

<template><div class="demo" ><h1 ref="title">Demo组件</h1><button @click="showTitle">Show Title</button></div>
</template><script setup lang="ts">
import { ref } from 'vue'// 创建一个title用于存储ref标记的内容
const title = ref()function showTitle() {console.log(title.value)
}
</script><style scoped lang="scss">
.demo {background-color: green;margin: 10px 0;padding: 20px;
}
</style>

注意:需要执行 npm install -D sass 命令安装 CSS 预处理器。

5> 修改 Vue 根组件 src/App.vue,引用自定义功能组件。

<template><div class="root"><h1 ref="title">App组件</h1><button @click="showTitle">Show Title</button><Demo ref="demo" /><button @click="showDemo">Show Demo</button></div>
</template><script setup lang="ts">
import Demo from './components/Demo.vue'
import { ref } from 'vue'// 存储ref标记的内容
const title = ref('title')
const demo = ref('demo')function showTitle() {console.log(title.value)
}function showDemo() {console.log(demo)
}
</script><style scoped lang="scss">
.root {background-color: orange;padding: 20px;
}
</style>

由以上代码可以看出,标签的 ref 属性既可以用在普通的 HTML 标签上,也可以用在组件标签上。

6> 执行命令 npm run dev 启动应用,浏览器访问:http://localhost:5173/

  • 点击 App 组件的 Show Title 按钮,显示日志如下:
    在这里插入图片描述

  • 点击自定义组件的 Show Title 按钮,显示日志如下:
    在这里插入图片描述

  • 点击 Show Demo 按钮,显示日志如下:
    在这里插入图片描述

从日志中可以看出:

  • 虽然 App 组件和自定义功能组件都在同一类型标签 <h1> 上使用了相同名称的 ref 属性,但实际获取到的是各自定义的 DOM 节点元素,不会出现冲突;
  • 如果 ref 属性用在普通的 HTML 标签上获取的是对应的 DOM 节点元素,如果用在组件标签上获取的是组件实例对象。

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

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

相关文章

Ubuntu22.04手动安装fabric release-2.5版本

这个过程稍微有点复杂&#xff0c;但完整操作完成以后会对Fabric网络有更加深入的理解&#xff0c;方便后续自己手动搭建Fabric网络。这个过程需要手动逐个下载Fabric源代码、使用命令下载Fabric镜像和用Git下载例子程序。 Fabric源代码主要用途是用来编译cryptogen、configtx…

二叉搜索树(图解)

文章目录 二叉搜索树的概念插入查找二叉搜索树的删除操作删除单孩子和叶子节点。del节点有两个孩子用左子树的最大节点替代用右子树的最小节点替代 弊端 二叉搜索树的概念 对于每颗子树&#xff0c;左子树 < 根&#xff0c;右子树 > 根。 二叉搜索树有以下操作&#xff1…

代码随想录二刷(哈希表)

代码随想录二刷(哈希表) 三数之和思路反正对于我来说是真的难想出来。 若这道题还是采用哈希表的思路去做&#xff0c;非常麻烦&#xff0c;并且还要考虑去重的操作。所以这道题其实用双指针&#xff0c;是更方便的。 具体程序如下&#xff1a; class Solution:def threeSu…

Docker简介和Docker常见命令

目录 1. Docker 简介 1.1 Docker 的核心概念 1.2 Docker 的优势 1.3 Docker 工作流程 2. 常见命令 2.1 基本命令 2.2 镜像操作 2.3 容器操作 2.4 网络操作 2.5 卷操作 2.6 日志和监控 2.7 清理命令 3. 注意事项和最佳实践 3.1 镜像操作 3.2 容器操作 3.3 网络操…

2.1、matlab绘图汇总(图例、标题、坐标轴、线条格式、颜色和散点格式设置)

1、前言 在 MATLAB 中进行绘图是一种非常常见且实用的操作,可以用来可视化数据、结果展示、分析趋势等。通过 MATLAB 的绘图功能,用户可以创建各种类型的图形,包括线图、散点图、柱状图、曲线图等,以及三维图形、动画等复杂的可视化效果。 在绘图之前,通常需要先准备好要…

docker部署容器端口占用问题

docker部署容器端口占用问题 当我在使用 Windows 下使用 Docker Desktop 部署docker容器时经常性发生容器启动失败的提示&#xff0c;并且有的时候重启电脑后就能成功启动容器&#xff0c;这是因为 Hyper-V 引起的 保留端口&#xff0c;这部分端口将会被系统保留&#xff0c;无…

基于SpringBoot+Vue的企业客户信息反馈平台(带1w+文档)

基于SpringBootVue的企业客户信息反馈平台(带1w文档) 基于SpringBootVue的企业客户信息反馈平台(带1w文档) 企业客户信息反馈平台的开发运用java技术&#xff0c;MIS的总体思想&#xff0c;以及MYSQL等技术的支持下共同完成了该平台的开发&#xff0c;实现了企业客户信息反馈管…

【C++】哈希容器

unordered系列关联式容器 在之前的博文中介绍过关联式容器中的map与set&#xff0c;同map与set一样&#xff0c;unordered_set与unordered_set也是关联式容器。 在C98中&#xff0c;STL提供了底层为红黑树结构的一系列关联式容器&#xff0c;查询效率可以达到logN&#xff1b;在…

安装 Terraform for Tencent 使用

第一步 &#xff1a;下载安装包 前往 Terraform 官网&#xff0c;使用命令行直接安装 Terraform 或下载二进制安装文件。 解压并配置全局路径 Linux/MAC&#xff1a;export PATH$PATH:${可执行文件所在目录} 例如&#xff1a;export PATH$PATH:$/usr/bin/terraform Win…

vue2学习 -- 核心语法

文章目录 前置简介1. 模板语法2. 数据2.1 数据绑定2.2 el与data的两种写法2.3 MVVM模型2.4 Object.defineProperty2.5 Vue中的数据代理 3. 事件3.1 事件处理3.2 事件修饰符3.3 键盘事件 4. 计算属性5. 监视(侦听)属性5.1 书写形式5.2 深度监视5.3 简写形式5.4 计算属性和监听属…

Go语言生成excel、将excel保存到本地、将多个excel表格压缩为压缩包、在压缩文件上传OSS删除本地excel文件和压缩包

最近在公司了个需求&#xff0c;主要涉及到文件导出&#xff0c;需要根据特定表格文件生成excel文件导出&#xff0c;同时对导出的excel临时保存本地&#xff0c;生成压缩包&#xff0c;将压缩包上传至OSS&#xff08;Object Storage Service&#xff09;后删除本地临时文件。下…

Go+Redis零基础到用户管理系统API实战_20240730 课程笔记

概述 如果您没有Golang的基础&#xff0c;应该学习如下前置课程。 Golang零基础入门Golang面向对象编程Go Web 基础Go语言开发REST API接口_20240728Go语言操作MySQL开发用户管理系统API教程_20240729Redis零基础快速入门_20231227 基础不好的同学每节课的代码最好配合视频进…

AI绘画模型之:VAE、SD 与 SD-XL

重磅推荐专栏: 《大模型AIGC》 《课程大纲》 《知识星球》 本专栏致力于探索和讨论当今最前沿的技术趋势和应用领域,包括但不限于ChatGPT和Stable Diffusion等。我们将深入研究大型模型的开发和应用,以及与之相关的人工智能生成内容(AIGC)技术。通过深入的技术解析和实践经…

Linux常用工具

文章目录 tar打包命令详解unzip命令&#xff1a;解压zip文件vim操作详解netstat详解df命令详解ps命令详解find命令详解 tar打包命令详解 tar命令做打包操作 当 tar 命令用于打包操作时&#xff0c;该命令的基本格式为&#xff1a; tar [选项] 源文件或目录此命令常用的选项及…

19082 中位特征值

这个问题可以通过深度优先搜索&#xff08;DFS&#xff09;和优先队列来解决。我们首先使用DFS来计算每个节点的特征值&#xff0c;然后我们将所有节点的特征值放入一个优先队列中&#xff0c;然后我们从优先队列中取出中间的元素&#xff0c;这就是我们要找的中位数。 以下是…

如何选择合适的自动化测试工具!

选择合适的自动化测试工具是一个涉及多方面因素的决策过程。以下是一些关键步骤和考虑因素&#xff0c;帮助您做出明智的选择&#xff1a; 一、明确测试需求和目标 测试范围&#xff1a;确定需要自动化的测试类型&#xff08;如单元测试、集成测试、UI测试等&#xff09;和测试…

React-Native 宝藏库大揭秘:精选开源项目与实战代码解析

1. 引言 1.1 React-Native 简介 React-Native 是由 Facebook 开发的一个开源框架&#xff0c;它允许开发者使用 JavaScript 和 React 的编程模型来构建跨平台的移动应用。React-Native 的核心理念是“Learn Once, Write Anywhere”&#xff0c;即学习一次 React 的编程模型&am…

社区养老服务小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;服务人员管理&#xff0c;服务产品管理&#xff0c;服务预约管理&#xff0c;服务状态管理&#xff0c;服务退订管理&#xff0c;活动管理&#xff0c;视频管理 微信端账号功能包…

基于cubeMX的STM32的RTC实时时钟实现

1、在仪器仪表的项目开发中&#xff0c;时常需要设备显示当前的日期和时间&#xff0c;这时&#xff0c;可以使用STM32自带的RTC实时时钟模块来实现此功能。这里我们使用STM32F103RCT6单片机芯片为例。 2、cubeMX的设置 &#xff08;1&#xff09;RTC设置 &#xff08;2&…

民大食堂用餐小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;商家管理&#xff0c;档口号管理&#xff0c;商家餐品管理&#xff0c;餐品种类管理&#xff0c;购物车管理&#xff0c;订单信息管理 微信端账号功能包括&#xff1a;系统首页&a…