【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 节点元素，如果用在组件标签上获取的是组件实例对象。