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}`

总结

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

您可能感兴趣的文章:

Ant Design的可编辑Tree的实现操作
这篇文章主要介绍了Ant Design的可编辑Tree的实现操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
Next.js路由布局机制详解
本文主要介绍了Next.js路由布局机制详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2025-01-01
学习vue.js中class与style绑定
这篇文章主要和大家一起学习vue.js中class与style绑定操作,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
vue跳转外部链接始终有localhost的问题
这篇文章主要介绍了vue跳转外部链接始终有localhost的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
通过npm或yarn自动生成vue组件的方法示例
这篇文章主要介绍了通过npm或yarn自动生成vue组件的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
Vue封装的标准漏斗图教程
文章展示了基于Vue封装的标准漏斗图的代码,包括权重算法、滚轮监听和点击示例功能,旨在提供实用的图表展示技巧
2025-02-02
vue-cli创建vue项目的详细步骤记录
vue.cli是vue中的项目构造工具,是一个npm包,需要安装node.js和 git才能用,下面这篇文章主要给大家介绍了关于利用vue-cli创建vue项目的详细步骤,需要的朋友可以参考下
2022-06-06
关于Vue CLI3中启动cli服务参数说明
这篇文章主要介绍了关于Vue CLI3中启动cli服务参数说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue中监听返回键问题
这篇文章主要介绍了解决vue中监听返回键问题,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-08-08
vue元素样式实现动态改变方法介绍
vue通过js动态修改元素的样式，如果是固定的几个样式，我常用的是绑定元素的calss,给不同的class写好需要的样式，js控制是否使用这个class
2022-09-09