vue3动态绑定ref并获取其dom实现方式
作者：meng半颗糖
Vue3中动态绑定ref建议用对象存储,通过索引访问嵌套元素；或使用计算属性获取DOM,两种方法可提升灵活性,适用于v-for循环场景,便于操作单/多层嵌套结构
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}`
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。