【vue3】循环设置ref并获取

在Vue 3中，你可以使用ref函数来创建响应式引用，并在循环中设置它们。然后，你可以通过访问ref的value属性来获取它们的值。以下是一个示例：

<template>
  <div>
    <!-- 循环渲染列表，并为每个项目创建ref -->
    <div v-for="(item, index) in items" :key="index" :ref="setItemRef(index)">
      {{ item }}
    </div>
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
 
const items = ref(['Item 1', 'Item 2', 'Item 3']);
const itemRefs = ref([]); // 用于存储ref的数组
 
// 设置ref的函数
function setItemRef(index) {
  return (el) => {
    if (el) {
      itemRefs.value[index] = el; // 将DOM元素存储在itemRefs数组中
    }
  };
}
 
// 在组件挂载后访问refs
onMounted(() => {
  itemRefs.value.forEach((itemRef, index) => {
    console.log(`Item ${index}:`, itemRef); // 这里可以访问DOM元素
  });
});
</script>

在这个例子中，我们使用v-for指令和ref属性来为每个循环的项目创建一个ref。setItemRef函数返回一个回调函数，该函数在每个子组件被挂载时调用，并将对应的DOM元素存储在itemRefs数组中。在onMounted钩子中，我们遍历这个数组并打印出每个项目的DOM元素。