【vue3】ref获取v-for循环渲染的元素

前言

在vue2里我们可以给元素绑定ref属性，然后使用this.$refs.xxx 就可以获取到元素。
而在vue3版本中，你可以继续使用vue2的option Api的语法，也可以使用vue2的写法。
或者还是用ref绑定元素，然后再setup方法中return 这个ref变量，如下：

<div :ref="myDom"> </div>

<script lang="ts">
...
  setup(){
    
    
    let myDom = ref(null)   
    console.log(myDom.value)   //这样就获取到这个元素了
    
    return {
    
    
      myDom
   }
  }
...
</script>

问题
在vue2版本中，v-for 渲染的元素通过绑定ref可以获得其元素数组。
但是在vue3里面使用v-for获取元素是拿不到元素数组的，只能获取到遍历出来的最后一个元素。

解决方法

<div  v-for="item in 5" :key="index"  ref="getMyDom"> </div>

<script lang="ts">
...
  setup(){
    
    
    
    let myDom = ref([])
    //遍历获取元素，然后放在一个数组里
    function getMyDom(el){
    
    
      if(el) {
    
    
        myDom.value.push(el)
      }
    }
    console.log(myDom.value)   //这样就获取到v-for渲染的元素数组了
    return {
    
    
      getMyDom
   }
  }
...
</script>