当前位置: 首页 > news >正文

Vue模板引用(Template Refs)全解析1

在 Vue 的声明式渲染模型中,我们通常无需直接操作 DOM——Vue 会自动处理 DOM 的更新与维护。但在某些场景下(如设置输入框焦点、初始化第三方 DOM 库、获取元素尺寸等),我们需要直接访问底层 DOM 元素或子组件实例。此时,模板引用(Template Refs) 就是实现这一需求的核心工具。

一、基础用法:访问 DOM 元素

模板引用通过特殊的 ref 属性实现:在模板中为元素添加 ref 属性并指定标识,再在逻辑中通过 Vue 提供的 API 获取该元素的直接引用。

1. 基本语法(Vue 3.5+:useTemplateRef

Vue 3.5 及以上版本推荐使用 useTemplateRef 辅助函数获取模板引用,用法简洁且类型推断更友好:

<script setup>
import { useTemplateRef, onMounted } from 'vue'// 1. 用 useTemplateRef 声明引用:第一个参数必须与模板中 ref 的值一致
// input 是一个 ref 对象,其 .value 会指向模板中对应的 DOM 元素
const input = useTemplateRef('my-input')// 2. 在组件挂载后访问引用(此时 DOM 已存在)
onMounted(() => {
http://www.xdnf.cn/news/1306117.html

相关文章:

  • sqlsever的sql转postgresql的sql的方言差异
  • Java-包装类
  • 机械学习---词向量转化评价,附代码实例
  • pyecharts可视化图表-pie:从入门到精通(进阶篇)
  • ETH持续上涨推动DEX热潮,交易活跃度飙升的XBIT表现强势出圈
  • uniapp纯前端绘制商品分享图
  • 访问者模式C++
  • Android RxJava 过滤与条件操作详解
  • 数据结构初阶(17)排序算法——非比较排序、排序算法总结
  • Flink的状态管理
  • SpringCloud学习
  • 【完整源码+数据集+部署教程】孔洞检测系统源码和数据集:改进yolo11-RetBlock
  • 自适应UI设计解读 | Fathom 企业人工智能平台
  • ​​金仓数据库KingbaseES V9R1C10安装教程 - Windows版详细指南​
  • 力扣习题:基本计算器
  • 从 “碳足迹“ 到 “零碳圈“:上海零碳园区的改造密码
  • Xget:为您的开发工作流解锁极致速度
  • 用 1 张 4090 复现 GPT-3.5?——单卡 24 GB 的「渐进式重计算」训练实践
  • 第三十五天(JSAjax技术)
  • 苹果(apple)ios系统和安卓(Android) apk系统开发者账号类型及申请步骤
  • Linux之高可用集群实战(二)
  • 利用Minicsv库解析csv文件的c程序及读入测试
  • expand.exe命令为什么能显示CD.iso的版本信息?
  • 中国象棋人机对战
  • Linux Namespace隔离实战:dd/mkfs/mount/unshare构建终极沙箱
  • Spring Boot 静态函数无法自动注入 Bean?深入解析与解决方案
  • MySQL 主键详解:作用与使用方法
  • 嵌入式:Linux软件编程:线程
  • 【详细操作指南】如何将 Moodle 与编辑器连接,以修改文档、检查和批改作业等
  • 2025年最新油管视频下载,附MassTube下载软件地址