vue3动态绑定ref并获取其dom实现方式

更新时间：2025年07月23日 14:41:30 作者：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}`

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue.js的双向数据绑定Object.defineProperty方法的神奇之处
今天小编就为大家分享一篇关于vue.js的双向数据绑定Object.defineProperty方法的神奇之处，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
vue中实现全屏以及对退出全屏的监听
本文主要介绍了vue中实现全屏以及对退出全屏的监听，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-07-07
vue3.2自定义弹窗组件结合函数式调用示例详解
这篇文章主要为大家介绍了vue3.2自定义弹窗组件结合函数式调用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
详解Vue.js3.0 组件是如何渲染为DOM的
这篇文章主要介绍了详解Vue.js3.0 组件是如何渲染为DOM的，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
vue项目如何全局修改el-button样式
这篇文章主要介绍了vue项目如何全局修改el-button样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
vue中向data添加新属性的三种方式小结
这篇文章主要介绍了vue中向data添加新属性的三种方式小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue初始化页面闪动(FOUC)问题的终极解决方案
你是否遇到过页面加载瞬间,用户看到满屏的 {{ message }}、{{ user.name }} 等未编译的模板标签,几毫秒后才恢复正常,这就是 Vue 初始化闪动问题,也称为 FOUC,本文将提供完整、可靠、可落地的解决方案,彻底根除此问题,需要的朋友可以参考下
2025-10-10
详解新手使用vue-router传参时注意事项
这篇文章主要介绍了详解新手使用vue-router传参时注意事项，详细的介绍了几种常见错误，需要的朋友们下面随着小编来一起学习学习吧
2019-06-06
el-select 的下拉框中新增俩自定义按钮的操作方法
文章介绍了在Element UI的el-select组件中新增自定义按钮的方法,并详细说明了设置`popper-append-to-body`属性为false的重要性,以及如何通过修改样式来实现自定义按钮的添加和样式效果展示,感兴趣的朋友跟随小编一起看看吧
2024-11-11
Vue 3.0中jsx语法的使用
这篇文章主要介绍了Vue 3.0 中 jsx 语法使用，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-11-11