vue3 通过动态 ref 获取 v-for 中的组件

      vue3中通过ref获取组件的方式与 vue2 写法有些不同，先来介绍一下 vue3 中获取组件的方式。

<template>
    <div ref="cptRef">...</div>
</template>
<script>
import { ref } from 'vue';
export default {
    setup() {
        const cptRef = ref(null);
        // 可通过cptRef.value获取组件上的属性或方法
        return {
            cptRef
        }
    }
}
</script>

      但有时组件是动态渲染的，尤其是在 v-for 中。这种情况官网也给出了解决方案，官网参考链接。以下是一个demo，懒人可直接拿去使用。

<template>
    <component v-for="item in cptArr" :key="item.type" :ref="setItemRef" :is="item.type"></component>
</template>
<script>
import { ref } from 'vue';
export default {
    setup() {
        const cptArr = [
            {type: 'imgCpt', option: {...}},
            {type: 'advCpt', option: {...}}
        ]
        const itemRefs = []
        const setItemRef = el => {
            if (el) {
                itemRefs.push(el)
            }
        }
        itemRefs.forEach(item => {
            // item 即为对应的组件ref
            // 可通过 item 获取对应组件上的属性或方法
        })
        return {
            setItemRef
        }
    }
}
</script>