使用ref获取Dom节点-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_73334325/article/details/130320933

文章详细介绍了在Vue2和Vue3中如何通过ref属性来获取DOM节点。在Vue2中，通过`this.$refs`访问；而在Vue3中，需要在setup函数中声明响应式变量并返回。对于多个DOM元素，Vue3可以使用ref绑定函数来收集元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Vue2使用ref获取Dom节点

在dom元素上添加ref=“属性值”，然后通过this.$refs.属性值读取dom节点

 <!-- 给元素添加ref属性 -->
<div class="com" ref="LeeYuFan">
    vue2通过ref获取Dom元素
</div>

-----------------------------------------------
// 读取元素
mounted() {
	console.log(this.$refs.LeeYuFan)
}

二、Vue3使用ref获取Dom节点

获取单个绑定了ref属性的标签节点

方法：（在setup中声明一个ref属性值同名的响应式变量返回出去，ref会自动绑定到该元素）

给Dom节点添加ref属性，并且自定义一个名称

在setup中使用ref声明一个变量与标签中ref属性值一致

这个通过ref声明的变量中存储的就是ref属性标记的Dom元素的节点了

<!-- 给节点添加ref属性 -->
<div ref="Lee">我是div节点</div>

----------------------------------------

setup() {
	// 在setup()中通过ref定义同名变量
	let Lee = ref("")
	onMounted(() => {
		console.log(Lee, '我是onMounted周期函数中的Lee变量')
	})
	return {
		Lee
	}
			
}

获取多个ref属性绑定的dom元素

方法：使用ref绑定一个函数获取元素，在函数中把dom添加到数组里面

<!-- 获取多个DOM节点 -->
<div id="div1" :ref="getRefDom"></div>
<span :ref="getRefDom" v-for="i in 3" :key="i"></span>

--------------------------------------------------------

setup() {
	//存放dom元素
	let domList = []
	const getRefDom = (el)=>{
		domList.push(el)
	}
	onMounted(() => {
		console.log(domList,'我是onMounted周期函数中的domList变量')
	})
	return {
		getRefDom
	}
}