<tbody id="86a2i"></tbody>


<dd id="86a2i"></dd>
<progress id="86a2i"><track id="86a2i"></track></progress>

<dd id="86a2i"></dd>
<em id="86a2i"><ruby id="86a2i"><u id="86a2i"></u></ruby></em>

    <dd id="86a2i"></dd>

    前言

    在開發過程中,很組件都是通過 v-for 動態渲染出來的組件,那么怎么給這些組件設置 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>
    

    結果失敗

    三、最終解決方案

    在網上看到了這么一句話

    可以試試這樣寫
    const mTextareaRef = ref<HTMLTextAreaElement|null>(null)
    ref 用在dom 上好像有固定寫法,初始化時傳入null,為了和普通的原始類型區分

    于是我把

    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官網解決方案

    v-for 中的 Ref 數組方案

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

    總結

    原文地址:https://blog.csdn.net/qiu_cs/article/details/125542414

    相關文章:

    免费一级a片在线播放视频|亚洲娇小性XXXX色|曰本无码毛片道毛片视频清|亚洲一级a片视频免费观看
    <tbody id="86a2i"></tbody>

    
    
    <dd id="86a2i"></dd>
    <progress id="86a2i"><track id="86a2i"></track></progress>

    <dd id="86a2i"></dd>
    <em id="86a2i"><ruby id="86a2i"><u id="86a2i"></u></ruby></em>

      <dd id="86a2i"></dd>