快捷導(dǎo)航

vue3循環(huán)設(shè)置ref并獲取的解決方案

更新時(shí)間：2024年02月02日 08:45:26 作者：湛海不過(guò)深藍(lán)

我們?cè)谄綍r(shí)做業(yè)務(wù)的時(shí)候,父子組件通信會(huì)經(jīng)常用到ref,這篇文章主要給大家介紹了關(guān)于vue3循環(huán)設(shè)置ref并獲取的解決方案,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

vue可通過(guò)ref來(lái)獲取當(dāng)前dom，但是vue3有個(gè)問(wèn)題，就是必須定義ref的變量名，才能使用

倘若有許多個(gè)ref，一個(gè)個(gè)去定義未免過(guò)于繁瑣，還有就是若是dom是使用v-for循環(huán)出來(lái)的，那么ref也就不確定了，無(wú)法提前定義

解決方法:

這是使用v-for循環(huán)出來(lái)的dom，ref通過(guò)index下標(biāo)來(lái)命名，

<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="暫無(wú)風(fēng)險(xiǎn)"
  />
</div>

此時(shí)riskSpreadRefList里面放的就是所有ref

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

使用：循環(huán)去取就行了，item就是通過(guò)ref拿到的dom元素?？梢圆僮魃厦娑x的變量或方法

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

還有一種獲取ref的方法，與上面略相似，記錄一下，但是用push可能會(huì)造成ref還沒(méi)渲染完得到null的情況，所以最好還是上面那樣寫(xiě)

<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獲取動(dòng)態(tài)循環(huán)生成的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數(shù)組
    const list = reactive([
        "第一行數(shù)據(jù)",
        "第二行數(shù)據(jù)",
        "第三行數(shù)據(jù)",
        "第四行數(shù)據(jù)",
    ])
    //賦值ref
    const setItemRef = el => { 
        if (el) {
            refList.value.push(el);
        }
    }

	//獲取ref并執(zhí)行接下來(lái)操作
    const getRefData = ()=>{
        for(let i =0; i < refList.value.length; i++){
            console.log(refList.value[i]); // refList.value[i].xxx   執(zhí)行todo
        }
    }
 </script>