vue3循环设置ref并获取的解决方案

我们在平时做业务的时候,父子组件通信会经常用到ref,这篇文章主要给大家介绍了关于vue3循环设置ref并获取的解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言：
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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

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

1
2
3
4
5
6
7

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

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

1
2
3
4