使用ref获取Dom节点

一、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
	}
}