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ǔ),通過索引訪問嵌套元素；或使用計(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>
通過 refsArray[index] 或 nestedRefs[i][j] 即可訪問嵌套元素
方法2：使用計(jì)算屬性
const getRefName = (index) => `itemRef_${index}`
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Ant Design的可編輯Tree的實(shí)現(xiàn)操作
這篇文章主要介紹了Ant Design的可編輯Tree的實(shí)現(xiàn)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
本文主要介紹了Next.js路由布局機(jī)制詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
學(xué)習(xí)vue.js中class與style綁定
這篇文章主要和大家一起學(xué)習(xí)vue.js中class與style綁定操作,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
vue跳轉(zhuǎn)外部鏈接始終有l(wèi)ocalhost的問題
這篇文章主要介紹了vue跳轉(zhuǎn)外部鏈接始終有l(wèi)ocalhost的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
通過npm或yarn自動(dòng)生成vue組件的方法示例
這篇文章主要介紹了通過npm或yarn自動(dòng)生成vue組件的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
文章展示了基于Vue封裝的標(biāo)準(zhǔn)漏斗圖的代碼,包括權(quán)重算法、滾輪監(jiān)聽和點(diǎn)擊示例功能,旨在提供實(shí)用的圖表展示技巧2025-02-02
vue-cli創(chuàng)建vue項(xiàng)目的詳細(xì)步驟記錄
vue.cli是vue中的項(xiàng)目構(gòu)造工具,是一個(gè)npm包,需要安裝node.js和 git才能用,下面這篇文章主要給大家介紹了關(guān)于利用vue-cli創(chuàng)建vue項(xiàng)目的詳細(xì)步驟,需要的朋友可以參考下2022-06-06
關(guān)于Vue?CLI3中啟動(dòng)cli服務(wù)參數(shù)說明
這篇文章主要介紹了關(guān)于Vue?CLI3中啟動(dòng)cli服務(wù)參數(shù)說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了解決vue中監(jiān)聽返回鍵問題,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
vue元素樣式實(shí)現(xiàn)動(dòng)態(tài)改變方法介紹
vue通過js動(dòng)態(tài)修改元素的樣式，如果是固定的幾個(gè)樣式，我常用的是綁定元素的calss,給不同的class寫好需要的樣式，js控制是否使用這個(gè)class2022-09-09