vue3 动态绑定 ref 并获取其 dom

 方法1： v-for

在 v-for 中建议用对象存储 refs 而非数组

函数参数 el‌：动态绑定时会传入当前 DOM 元素或组件实例

<template><div v-for="item in items" :key="item.id"><div :ref="(el) => setItemRef(el, item.id)"></div></div>
</template><script setup>
import { ref } from 'vue'const items = ref([{ id: 1 }, { id: 2 }])
const itemRefs = ref({})const setItemRef = (el, id) => {if (el) {itemRefs.value[id] = el // 存储 DOM 引用}
}onMounted(() => {console.log(itemRefs.value) // 输出 {1: div, 2: div}
})
</script>

 for 循环 可使用单/多层 嵌套

<!-- 单层循环 -->
<div v-for="(item, index) in list" :key="index"><input :ref="(el) => (refsArray[index] = el)" />
</div><!-- 嵌套循环 -->
<div v-for="(group, i) in groups" :key="i"><div v-for="(item, j) in group.items" :key="j"><input :ref="(el) => (nestedRefs[i][j] = el)" /></div>
</div>

通过 refsArray[index] 或 nestedRefs[i][j] 即可访问嵌套元素

方法2：使用计算属性

const getRefName = (index) => `itemRef_${index}`