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>
- 此时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)
});附：vue3获取动态循环生成的ref
html部分：
<template>
<div v-for="(item,index) in list" :ref="setItemRef">
{{item}}
</div>
<el-button @click="getRefData">获取</el-button>
</template>
js部分
<script lang="ts" setup>
import {ref,reactive,onMounted} from 'vue'
const refList = ref([]); //定义ref数组
const list = reactive([
"第一行数据",
"第二行数据",
"第三行数据",
"第四行数据",
])
//赋值ref
const setItemRef = el => {
if (el) {
refList.value.push(el);
}
}
//获取ref并执行接下来操作
const getRefData = ()=>{
for(let i =0; i < refList.value.length; i++){
console.log(refList.value[i]); // refList.value[i].xxx 执行todo
}
}
</script>总结
到此这篇关于vue3循环设置ref并获取的文章就介绍到这了,更多相关vue3循环设置ref并获取内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！