vue3給動態(tài)渲染的組件添加ref的解決方案

更新時間：2022年11月16日 15:40:39 作者：qiu_cs

ref和reactive一樣,也是用來實現(xiàn)響應式數(shù)據(jù)的方法,下面這篇文章主要給大家介紹了關于vue3給動態(tài)渲染的組件添加ref的解決方案,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

在開發(fā)過程中，很組件都是通過 v-for 動態(tài)渲染出來的組件，那么怎么給這些組件設置 ref 呢

一、問題示例

如下代碼功能所示：

<div v-for="(e, i) in elements">
	<component ref="ref" :is="e.com" />
</div>

<script setup>
const ref = ref(null)
</script>

以上代碼運行時，控制臺會有一堆警告

[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>

結果失敗

通過對象來存儲ref，代碼如下：

<div v-for="(e, i) in elements">
	<component ref="ref[e.id]" :is="e.com" />
</div>

<script setup>
const ref = reactive({})
</script>

結果失敗

通過對象來存儲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>

結果失敗

三、最終解決方案

在網(wǎng)上看到了這么一句話：

可以試試這樣寫
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>

結果成功

四、vue3官網(wǎng)解決方案

v-for 中的 Ref 數(shù)組方案

<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
    }
  }
}

總結

到此這篇關于vue3給動態(tài)渲染的組件添加ref的文章就介紹到這了,更多相關vue3動態(tài)渲染組件添加ref內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue使用Vuex狀態(tài)管理模式
這篇文章介紹了vue使用Vuex狀態(tài)管理模式的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-04-04
Vue響應式系統(tǒng)的原理詳解
這篇文章主要為大家介紹了Vue響應式系統(tǒng)的原理，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
解決Vue開發(fā)中對話框被遮罩層擋住的問題
在Vue的開發(fā)中，一旦我們用到對話框，經(jīng)常出現(xiàn)的問題是對話框被遮罩層擋住,怎么來解決這個問題呢？下面小編給大家?guī)砹薞ue開發(fā)中對話框被遮罩層擋住的問題及解決方法，一起看看吧
2018-11-11
element中table操作按鈕展示與折疊的實現(xiàn)示例
因為隨著功能的增多，table操作欄中的功能按鈕增多，這時候就需要折疊，本文主要介紹了element中table操作按鈕展示與折疊的實現(xiàn)示例，具有一定的參考價值，感興趣的可以了解一下
2022-04-04
vue+uniapp瀑布流布局多種實現(xiàn)方式示例代碼
由于使用uniapp開發(fā)的微信小程序不需要考慮響應式,因此瀑布流的實現(xiàn)相對于pc端更為簡單,下面這篇文章主要給大家介紹了關于vue+uniapp瀑布流布局多種實現(xiàn)方式的相關資料,需要的朋友可以參考下
2023-03-03
詳解vue-router數(shù)據(jù)加載與緩存使用總結
這篇文章主要介紹了詳解vue-router數(shù)據(jù)加載與緩存使用總結，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10
vue路由跳轉打開新窗口(window.open())和關閉窗口(window.close())
這篇文章主要介紹了vue路由跳轉打開新窗口(window.open())和關閉窗口(window.close())問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
解決ele ui 表格表頭太長問題的實現(xiàn)
這篇文章主要介紹了解決ele ui 表格表頭太長問題的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-11-11
vue如何判斷數(shù)組中的對象是否包含某個值
這篇文章主要介紹了vue如何判斷數(shù)組中的對象是否包含某個值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
詳解vue數(shù)組遍歷方法forEach和map的原理解析和實際應用
這篇文章主要介紹了詳解vue數(shù)組遍歷方法forEach和map的原理解析和實際應用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11