前言
在開發過程中，很組件都是通過 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官網解決方案
<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