【Vue3】标签的 ref 属性
【Vue3】标签的 ref 属性
- 背景
- 简介
- 开发环境
- 开发步骤及源码
背景
随着年龄的增长，很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来，技术出身的人总是很难放下一些执念，遂将这些知识整理成文，以纪念曾经努力学习奋斗的日子。本文内容并非完全原创，大多是参考其他文章资料整理所得，感谢每位技术人的开源精神。
简介
本文介绍 Vue3 中如何使用标签的 ref 属性。
传统开发中通常使用 document.getElementById() 获取标签对应的 DOM 元素，如果页面中多个 DOM 元素使用相同的 ID 进行标识，则使用 document.getElementById() 可能获取非目标 DOM 元素。Vue 提供了标签的 ref 属性解决此问题。
开发环境
| 分类 | 名称 | 版本 |
|---|---|---|
| 操作系统 | Windows | Windows 11 |
| IDE | Visual Studio Code | 1.91.1 |
开发步骤及源码
1> 创建 Vue3 工程，参考：【Vue3】工程创建及目录说明。
2> 删除 src 目录下 assets 和 components 目录。
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 节点元素，如果用在组件标签上获取的是组件实例对象。