vue3给动态渲染的组件添加ref的解决方案

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

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

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

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

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

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

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

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

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