vue3 component循环的组件，怎么ref获取dom啊？

Question

<template>
  <edo-nav />
  <main>
    <component v-for="component in components" :key="component" :is="component" :ref="myRefs" />
  </main>
</template>

<script setup>
/**
* @author        全易
* @time          2023-08-08 11:22:39  星期二
* @description   
**/
import edoNav from "./modules/nav"
import edoHome from "./modules/home"
import edoAbout from "./modules/about"
import edoProducts from "./modules/products"
import edoExamples from "./modules/example"
import edoPrograms from "./modules/programs"
import edoContact from "./modules/contact"

import { ref, onMounted } from 'vue'



const components = [edoHome, edoAbout, edoProducts, edoExamples, edoPrograms, edoContact]
const myRefs = ref([]);
onMounted(() => {
  console.log(myRefs.value);
})


</script>

<style lang="less" scoped></style>

打印出来就是：

并没有dom元素

Answer 1

这样试试

<template>
  <edo-nav />
  <main>
    <component v-for="(component, index) in components" :key="component" :is="component" :ref="el => myRefs[index] = el" />
  </main>
这样试试 
</template>
 
<script setup>
import edoNav from "./modules/nav"
import edoHome from "./modules/home"
import edoAbout from "./modules/about"
import edoProducts from "./modules/products"
import edoExamples from "./modules/example"
import edoPrograms from "./modules/programs"
import edoContact from "./modules/contact"
 
import { ref, onMounted } from 'vue'
 
const components = [edoHome, edoAbout, edoProducts, edoExamples, edoPrograms, edoContact]
const myRefs = ref([]);
onMounted(() => {
  console.log(myRefs.value);
})
</script>