Vue3 通过ref获取DOM节点

官方定义：

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。

<!-- vm.$refs.p 会是 DOM 节点 -->
<p ref="p">hello</p>
 
<!-- vm.$refs.child 会是子组件实例 -->
<child-component ref="child"></child-component>
 
<!-- 当动态绑定时，我们可以将ref定义为回调函数，显式地传递元素或组件实例 -->
<child-component :ref="(el) => child = el"></child-component>

当 v-for 用于元素或组件的时候，引用信息将是包含 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>

参考Vue3 通过ref获取DOM结点_vue3 ref获取dom-CSDN博客

参考vue3中通过ref属性获取DOM_vue3通过ref选择dom对象-CSDN博客