vue3中通过ref属性获取DOM

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

vue3需要借助生命周期方法，在setup执行时，template中的元素还没挂载到页面上，所以必须在mounted之后才能获取到元素。

<template>
  <h1 ref="box">Ref属性获取dom</h1>
</template>

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

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

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

使用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遍历的元素
        // 定义一个空数组，接收所有的LI
        // 定义一个函数，往空数组push Dom
        let listDom = []
        const getlist = (el) => {
            listDom.push(el)
        }
        console.log(listDom);
        return {
            getlist
        }
    }
}
</script>

总结：

        单个元素： 先声明ref响应式数据，返回给模板使用，通过ref绑定数据

        遍历的元素：先定义一个空数组，定一个函数获取元素，返回给模板使用，通过ref绑定这个函数