vue3給動態(tài)渲染的組件添加ref的解決方案
前言
在開發(fā)過程中，很組件都是通過 v-for 動態(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)行時，控制臺會有一堆警告
[Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes.
二、嘗試解決方案
通過對象來存儲ref，代碼如下：
<div v-for="(e, i) in elements">
<component ref="ref[e.id]" :is="e.com" />
</div>
<script setup>
const ref = reactive({})
</script>
結(jié)果失敗
通過對象來存儲ref，代碼如下：
<div v-for="(e, i) in elements">
<component ref="ref[e.id]" :is="e.com" />
</div>
<script setup>
const ref = reactive({})
</script>
結(jié)果失敗
通過對象來存儲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 上好像有固定寫法，初始化時傳入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給動態(tài)渲染的組件添加ref的文章就介紹到這了,更多相關(guān)vue3動態(tài)渲染組件添加ref內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章介紹了vue使用Vuex狀態(tài)管理模式的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-04-04
這篇文章主要為大家介紹了Vue響應(yīng)式系統(tǒng)的原理，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
在Vue的開發(fā)中，一旦我們用到對話框，經(jīng)常出現(xiàn)的問題是對話框被遮罩層擋住,怎么來解決這個問題呢？下面小編給大家?guī)砹薞ue開發(fā)中對話框被遮罩層擋住的問題及解決方法，一起看看吧2018-11-11
element中table操作按鈕展示與折疊的實(shí)現(xiàn)示例
因?yàn)殡S著功能的增多，table操作欄中的功能按鈕增多，這時候就需要折疊，本文主要介紹了element中table操作按鈕展示與折疊的實(shí)現(xiàn)示例，具有一定的參考價值，感興趣的可以了解一下2022-04-04
vue+uniapp瀑布流布局多種實(shí)現(xiàn)方式示例代碼
由于使用uniapp開發(fā)的微信小程序不需要考慮響應(yīng)式,因此瀑布流的實(shí)現(xiàn)相對于pc端更為簡單,下面這篇文章主要給大家介紹了關(guān)于vue+uniapp瀑布流布局多種實(shí)現(xiàn)方式的相關(guān)資料,需要的朋友可以參考下2023-03-03
詳解vue-router數(shù)據(jù)加載與緩存使用總結(jié)
這篇文章主要介紹了詳解vue-router數(shù)據(jù)加載與緩存使用總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
vue路由跳轉(zhuǎn)打開新窗口(window.open())和關(guān)閉窗口(window.close())
這篇文章主要介紹了vue路由跳轉(zhuǎn)打開新窗口(window.open())和關(guān)閉窗口(window.close())問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
解決ele ui 表格表頭太長問題的實(shí)現(xiàn)
這篇文章主要介紹了解決ele ui 表格表頭太長問題的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了vue如何判斷數(shù)組中的對象是否包含某個值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
詳解vue數(shù)組遍歷方法forEach和map的原理解析和實(shí)際應(yīng)用
這篇文章主要介紹了詳解vue數(shù)組遍歷方法forEach和map的原理解析和實(shí)際應(yīng)用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11