郑州网站优化汉狮网络,网站开发项目教程笔记,项目管理软件免费,天津百度推广公司地址【Vue3】标签的 ref 属性 背景简介开发环境开发步骤及源码 背景
随着年龄的增长#xff0c;很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来#xff0c;技术出身的人总是很难放下一些执念#xff0c;遂将这些知识整理成文#xff0c;以纪念曾经努力学习奋斗的日子。… 【Vue3】标签的 ref 属性 背景简介开发环境开发步骤及源码 背景
随着年龄的增长很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来技术出身的人总是很难放下一些执念遂将这些知识整理成文以纪念曾经努力学习奋斗的日子。本文内容并非完全原创大多是参考其他文章资料整理所得感谢每位技术人的开源精神。
简介
本文介绍 Vue3 中如何使用标签的 ref 属性。
传统开发中通常使用 document.getElementById() 获取标签对应的 DOM 元素如果页面中多个 DOM 元素使用相同的 ID 进行标识则使用 document.getElementById() 可能获取非目标 DOM 元素。Vue 提供了标签的 ref 属性解决此问题。
开发环境
分类名称版本操作系统WindowsWindows 11IDEVisual Studio Code1.91.1
开发步骤及源码
1 创建 Vue3 工程参考【Vue3】工程创建及目录说明。
2 删除 src 目录下 assets 和 components 目录。
3 修改 src 目录下 main.ts。
import { createApp } from vue
import App from ./App.vuecreateApp(App).mount(#app)4 自定义功能组件。
templatediv classdemo h1 reftitleDemo组件/h1button clickshowTitleShow Title/button/div
/templatescript setup langts
import { ref } from vue// 创建一个title用于存储ref标记的内容
const title ref()function showTitle() {console.log(title.value)
}
/scriptstyle scoped langscss
.demo {background-color: green;margin: 10px 0;padding: 20px;
}
/style注意需要执行 npm install -D sass 命令安装 CSS 预处理器。
5 修改 Vue 根组件 src/App.vue引用自定义功能组件。
templatediv classrooth1 reftitleApp组件/h1button clickshowTitleShow Title/buttonDemo refdemo /button clickshowDemoShow Demo/button/div
/templatescript setup langts
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)
}
/scriptstyle scoped langscss
.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 节点元素如果用在组件标签上获取的是组件实例对象。
