vue3获取动态循环生成的ref

vue3获取动态循环生成的ref

下面介绍vue3如何获取动态循环生成的ref
往期相关文章vue3.x $nextTick和 $refs用法

html部分：

<template>
    <div  v-for="(item,index) in list" :ref="setItemRef">
      {
    
    {
    
    item}}
    </div>
    <el-button @click="getRefData">获取</el-button>
</template>

js部分

<script lang="ts" setup>
    import {
    
    ref,reactive,onMounted} from 'vue'
    const refList = ref([]); //定义ref数组
    const list = reactive([
        "第一行数据",
        "第二行数据",
        "第三行数据",
        "第四行数据",
    ])
    //赋值ref
    const setItemRef = el => {
    
     
        if (el) {
    
    
            refList.value.push(el);
        }
    }

	//获取ref并执行接下来操作
    const getRefData = ()=>{
    
    
        for(let i =0; i < refList.value.length; i++){
    
    
            console.log(refList.value[i]); // refList.value[i].xxx   执行todo
        }
    }
 </script>