vue3動態(tài)綁定ref并獲取其dom實現(xiàn)方式
更新時間：2025年07月23日 14:41:30 作者：meng半顆糖
Vue3中動態(tài)綁定ref建議用對象存儲,通過索引訪問嵌套元素；或使用計算屬性獲取DOM,兩種方法可提升靈活性,適用于v-for循環(huán)場景,便于操作單/多層嵌套結構
vue3動態(tài)綁定ref并獲取其dom
方法1：v-for
在 v-for 中建議用對象存儲 refs 而非數(shù)組
- 函數(shù)參數(shù)
el：動態(tài)綁定時會傳入當前 DOM 元素或組件實例
<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 // 存儲 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：使用計算屬性
const getRefName = (index) => `itemRef_${index}`
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue.js的雙向數(shù)據綁定Object.defineProperty方法的神奇之處
今天小編就為大家分享一篇關于vue.js的雙向數(shù)據綁定Object.defineProperty方法的神奇之處，小編覺得內容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
vue中實現(xiàn)全屏以及對退出全屏的監(jiān)聽
本文主要介紹了vue中實現(xiàn)全屏以及對退出全屏的監(jiān)聽，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要為大家介紹了vue3.2自定義彈窗組件結合函數(shù)式調用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了詳解Vue.js3.0 組件是如何渲染為DOM的 ，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
這篇文章主要介紹了vue項目如何全局修改el-button樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue中向data添加新屬性的三種方式小結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
你是否遇到過頁面加載瞬間,用戶看到滿屏的 {{ message }}、{{ user.name }} 等未編譯的模板標簽,幾毫秒后才恢復正常,這就是 Vue 初始化閃動問題,也稱為 FOUC,本文將提供完整、可靠、可落地的解決方案,徹底根除此問題,需要的朋友可以參考下2025-10-10
這篇文章主要介紹了詳解新手使用vue-router傳參時注意事項，詳細的介紹了幾種常見錯誤，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
文章介紹了在Element UI的el-select組件中新增自定義按鈕的方法,并詳細說明了設置`popper-append-to-body`屬性為false的重要性,以及如何通過修改樣式來實現(xiàn)自定義按鈕的添加和樣式效果展示,感興趣的朋友跟隨小編一起看看吧2024-11-11
這篇文章主要介紹了Vue 3.0 中 jsx 語法使用，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11