【vue3】循环设置ref并获取

最新推荐文章于 2025-02-28 11:14:56 发布

湛海不过深蓝

最新推荐文章于 2025-02-28 11:14:56 发布

阅读量8.9k

点赞数 16

分类专栏： vue3+ts 文章标签： vue.js javascript ecmascript

本文链接：https://blog.youkuaiyun.com/bbt953/article/details/131933567

版权

vue3+ts 专栏收录该内容

29 篇文章

订阅专栏

在Vue3中，当需要为多个使用v-for循环生成的DOM元素设置ref时，可以通过动态生成ref名称并利用回调函数存储到数组中来解决。例如，使用index作为ref的后缀，然后在回调函数里将对应的DOM元素添加到数组。这种方法避免了提前定义每个ref，且能确保在元素渲染完成后获取到正确的元素引用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue可通过ref来获取当前dom，但是vue3有个问题，就是必须定义ref的变量名，才能使用

倘若有许多个ref，一个个去定义未免过于繁琐，还有就是若是dom是使用v-for循环出来的，那么ref也就不确定了，无法提前定义

解决方法:

这是使用v-for循环出来的dom，ref通过index下标来命名，

<div
 class="chart"
  v-for="(item, index) in riskSpreadItem"
  :key="item.title"
>
  <Pie
    :id="`riskSpread${index}`"
    :ref="el => getRiskSpreadRef(el, index)"
    :title="item.title"
    :data="item.data"
    emptyText="暂无风险"
  />
</div>

此时riskSpreadRefList里面放的就是所有ref

const riskSpreadRefList = ref<HTMLElement[]>([]);
const getRiskSpreadRef = (el, index) => {
  if (el) {
    riskSpreadRefList.value[index] = el; 
  }
};

使用：循环去取就行了，item就是通过ref拿到的dom元素。可以操作上面定义的变量或方法

riskSpreadRefList.value?.forEach((item: any) => {
    console.log(item)
});

还有一种获取ref的方法，与上面略相似，记录一下，但是用push可能会造成ref还没渲染完得到null的情况，所以最好还是上面那样写

<div class="chart">
  <Pie
    :id="`risk${index}`"
    :ref="getRiskRef"
    :data="item.data"
    @clickPie="queryRiskList"
  />
</div>

let riskRefList = ref<HTMLElement[]>([]);
const getRiskRef = (el) => {
  if (el) {
    riskRefList.value.push(el);
  }
};

riskRefList .value?.forEach((item: any) => {
    console.log(item)
});