vue3給動(dòng)態(tài)渲染的組件添加ref的解決方案
前言
在開發(fā)過程中，很組件都是通過 v-for 動(dòng)態(tài)渲染出來的組件，那么怎么給這些組件設(shè)置 ref 呢
一、問題示例
如下代碼功能所示：
<div v-for="(e, i) in elements"> <component ref="ref" :is="e.com" /> </div> <script setup> const ref = ref(null) </script>
以上代碼運(yùn)行時(shí)，控制臺(tái)會(huì)有一堆警告
[Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes.
二、嘗試解決方案
通過對(duì)象來存儲(chǔ)ref，代碼如下：
<div v-for="(e, i) in elements">
<component ref="ref[e.id]" :is="e.com" />
</div>
<script setup>
const ref = reactive({})
</script>
結(jié)果失敗
通過對(duì)象來存儲(chǔ)ref，代碼如下：
<div v-for="(e, i) in elements">
<component ref="ref[e.id]" :is="e.com" />
</div>
<script setup>
const ref = reactive({})
</script>
結(jié)果失敗
通過對(duì)象來存儲(chǔ)ref，代碼如下：
<div v-for="(e, i) in elements">
<component ref="ref[e.id]" :is="e.com" />
</div>
<script setup>
const ref = ref({})
elements.forEach(e -> ref.value[e.id] = null)
</script>
結(jié)果失敗
三、最終解決方案
可以試試這樣寫
const mTextareaRef = ref<HTMLTextAreaElement｜null>(null)
ref 用在dom 上好像有固定寫法，初始化時(shí)傳入null，為了和普通的原始類型區(qū)分
于是我把
ref.value[e.id] = null 改成 ref.value[e.id] = ref(null)
代碼如下：
<div v-for="(e, i) in elements">
<component ref="ref[e.id]" :is="e.com" />
</div>
<script setup>
const ref = ref({})
elements.forEach(e -> ref.value[e.id] = ref(null))
</script>
結(jié)果成功
四、vue3官網(wǎng)解決方案
<div v-for="item in list" :ref="setItemRef"></div>
import { onBeforeUpdate, onUpdated } from 'vue'
export default {
setup() {
let itemRefs = []
const setItemRef = el => {
if (el) {
itemRefs.push(el)
}
}
onBeforeUpdate(() => {
itemRefs = []
})
onUpdated(() => {
console.log(itemRefs)
})
return {
setItemRef
}
}
}
總結(jié)
到此這篇關(guān)于vue3給動(dòng)態(tài)渲染的組件添加ref的文章就介紹到這了,更多相關(guān)vue3動(dòng)態(tài)渲染組件添加ref內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3組合式函數(shù)Composable實(shí)戰(zhàn)ref和unref使用
這篇文章主要為大家介紹了Vue3組合式函數(shù)Composable實(shí)戰(zhàn)ref和unref使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
VUE引入DataV報(bào)錯(cuò)解決實(shí)戰(zhàn)記錄
在使用vue開發(fā)大屏?xí)r,發(fā)現(xiàn)了一個(gè)很好用的可視化組件庫DataV,下面這篇文章主要給大家介紹了關(guān)于VUE引入DataV報(bào)錯(cuò)解決的實(shí)戰(zhàn)記錄,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
Vue3實(shí)現(xiàn)動(dòng)態(tài)切換Menu的示例代碼
本文介紹了在Vue3項(xiàng)目中使用頂部導(dǎo)航欄和側(cè)邊欄,通過頂部導(dǎo)航控制側(cè)邊欄的生成,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
這篇文章主要介紹了vue自定義marquee無縫滾動(dòng)組件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue watch偵聽器有無immediate的運(yùn)行順序問題
這篇文章主要介紹了vue watch偵聽器有無immediate的運(yùn)行順序問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue實(shí)現(xiàn)圖片滾動(dòng)的示例代碼(類似走馬燈效果)
下面小編就為大家分享一篇vue實(shí)現(xiàn)圖片滾動(dòng)的示例代碼(類似走馬燈效果)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue使用konva實(shí)現(xiàn)一個(gè)簡(jiǎn)便的流程圖
日常開發(fā)中我們可能碰到流程圖的需求,實(shí)現(xiàn)流程圖的庫有很多,如果我們想要實(shí)現(xiàn)一個(gè)簡(jiǎn)便的流程圖可以使用konva庫來實(shí)現(xiàn),下面我們就來看一下具體的實(shí)現(xiàn)過程,需要的朋友可以參考下2023-08-08
vue去掉嚴(yán)格開發(fā),去掉vue-cli安裝時(shí)的eslint或修改配置方式
這篇文章主要介紹了vue去掉嚴(yán)格開發(fā),去掉vue-cli安裝時(shí)的eslint或修改配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue項(xiàng)目中使用fontawesome圖標(biāo)庫的方法
fontawesome的圖標(biāo)有免費(fèi)版和專業(yè)版,本文主要使用free版本,一般free版本的圖標(biāo)夠用,free圖標(biāo)又劃分為三個(gè)圖標(biāo)庫,主要有實(shí)心圖標(biāo)solid、常規(guī)圖標(biāo)regular及品牌圖標(biāo)brand,根據(jù)需求去下載對(duì)應(yīng)的圖標(biāo)庫,無須全部下載,對(duì)vue?fontawesome圖標(biāo)庫相關(guān)知識(shí)感興趣的朋友一起看看吧2023-12-12
vue解決刷新頁面時(shí)會(huì)出現(xiàn)變量閃爍的問題
這篇文章主要介紹了vue解決刷新頁面時(shí)會(huì)出現(xiàn)變量閃爍的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01