快捷導(dǎo)航

vue3動(dòng)態(tài)綁定ref并獲取其dom實(shí)現(xiàn)方式

更新時(shí)間：2025年07月23日 14:41:30 作者：meng半顆糖

Vue3中動(dòng)態(tài)綁定ref建議用對(duì)象存儲(chǔ),通過(guò)索引訪問(wèn)嵌套元素；或使用計(jì)算屬性獲取DOM,兩種方法可提升靈活性,適用于v-for循環(huán)場(chǎng)景,便于操作單/多層嵌套結(jié)構(gòu)

vue3動(dòng)態(tài)綁定ref并獲取其dom

方法1：v-for

在 v-for 中建議用對(duì)象存儲(chǔ) refs 而非數(shù)組

函數(shù)參數(shù) el‌：動(dòng)態(tài)綁定時(shí)會(huì)傳入當(dāng)前 DOM 元素或組件實(shí)例

<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 // 存儲(chǔ) DOM 引用
  }
}

onMounted(() => {
  console.log(itemRefs.value) // 輸出 {1: div, 2: div}
})
</script>

for循環(huán) 可使用單/多層嵌套

<!-- 單層循環(huán) -->
<div v-for="(item, index) in list" :key="index">
  <input :ref="(el) => (refsArray[index] = el)" />
</div>

<!-- 嵌套循環(huán) -->
<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>

通過(guò) refsArray[index] 或 nestedRefs[i][j] 即可訪問(wèn)嵌套元素

方法2：使用計(jì)算屬性

const getRefName = (index) => `itemRef_${index}`

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue.js的雙向數(shù)據(jù)綁定Object.defineProperty方法的神奇之處
今天小編就為大家分享一篇關(guān)于vue.js的雙向數(shù)據(jù)綁定Object.defineProperty方法的神奇之處，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
2019-01-01
vue中實(shí)現(xiàn)全屏以及對(duì)退出全屏的監(jiān)聽(tīng)
本文主要介紹了vue中實(shí)現(xiàn)全屏以及對(duì)退出全屏的監(jiān)聽(tīng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-07-07
vue3.2自定義彈窗組件結(jié)合函數(shù)式調(diào)用示例詳解
這篇文章主要為大家介紹了vue3.2自定義彈窗組件結(jié)合函數(shù)式調(diào)用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
詳解Vue.js3.0 組件是如何渲染為DOM的
這篇文章主要介紹了詳解Vue.js3.0 組件是如何渲染為DOM的，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
vue項(xiàng)目如何全局修改el-button樣式
這篇文章主要介紹了vue項(xiàng)目如何全局修改el-button樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue中向data添加新屬性的三種方式小結(jié)
這篇文章主要介紹了vue中向data添加新屬性的三種方式小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue初始化頁(yè)面閃動(dòng)(FOUC)問(wèn)題的終極解決方案
你是否遇到過(guò)頁(yè)面加載瞬間,用戶(hù)看到滿(mǎn)屏的 {{ message }}、{{ user.name }} 等未編譯的模板標(biāo)簽,幾毫秒后才恢復(fù)正常,這就是 Vue 初始化閃動(dòng)問(wèn)題,也稱(chēng)為 FOUC,本文將提供完整、可靠、可落地的解決方案,徹底根除此問(wèn)題,需要的朋友可以參考下
2025-10-10
詳解新手使用vue-router傳參時(shí)注意事項(xiàng)
這篇文章主要介紹了詳解新手使用vue-router傳參時(shí)注意事項(xiàng)，詳細(xì)的介紹了幾種常見(jiàn)錯(cuò)誤，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
el-select 的下拉框中新增倆自定義按鈕的操作方法
文章介紹了在Element UI的el-select組件中新增自定義按鈕的方法,并詳細(xì)說(shuō)明了設(shè)置`popper-append-to-body`屬性為false的重要性,以及如何通過(guò)修改樣式來(lái)實(shí)現(xiàn)自定義按鈕的添加和樣式效果展示,感興趣的朋友跟隨小編一起看看吧
2024-11-11
Vue 3.0中jsx語(yǔ)法的使用
這篇文章主要介紹了Vue 3.0 中 jsx 語(yǔ)法使用，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-11-11