Vue3 通过ref获取DOM结点

一；获取单个绑定了ref属性的标签结点

1.给想要获取DOM元素的标签加上 ref 属性，并自定义一个名称

2.在 setup 中使用 ref 声明一个变量名与标签中 ref 属性名称相同的变量

3.之后这个通过 ref 声明的变量中存储的就是 ref 属性标记了的元素DOM结点

<template>
  <div ref="getDom"> Ref属性获取dom </div>
</template>
 
<script>
import { ref } from 'vue'
export default {
    name: 'Ref',
    setup () {
        // 先定义一个空的响应式数据ref定义的
        // setup中返回该数据，你想获取那个dom元素，在该元素上使用ref属性绑定该数据即可
        let getDom= ref(null)
        return {
            getDom
        }
    }
}
</script>

二；获取 v-for 循环的多个 ref 结点

1.获取 v-for 循环的结点，需要动态绑定 ref 属性，并定义一个获取对应DOM元素的回调函数。

<template>
  <h3 :ref="getlist" v-for="index in 3">我是一组元素{{index}}</h3>
</template>
 
<script>
import { ref, onMounted } from 'vue'
export default {
    name: 'Ref',
    setup () {
        // 获取v-for遍历的元素
        // 定义一个空数组，准备接收循环的DOM元素
        // 定义动态 ref 所对应的回调函数，往空数组push Dom
        let listDom = []
        const getlist = (el) => {
            listDom.push(el)
        }
        return {
            getlist
        }
    }
}
</script>

参考：(28条消息) vue3中通过ref属性获取DOM_李公子丶的博客-CSDN博客_vue3 通过ref获取dom