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

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

这样试试

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

【以下回答由 GPT 生成】

在Vue3中，如果要在循环组件中获取DOM元素，可以使用ref和$refs来实现。在你的代码中，需要进行以下修改来正确获取组件的DOM元素：

1. 在模板中，将:ref绑定到一个数组上，而不是myRefs。将:ref="myRefs"改为:ref="myRefs"。

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

1. 在<script setup>中，使用ref创建一个名为myRefs的ref，并将其初始化为空数组。

const myRefs = ref([]);

1. 在每次组件渲染完成后，将组件的DOM元素添加到myRefs数组中。可以通过在onMounted钩子中使用$refs属性来访问到每个组件的DOM元素。在循环中，将每个组件的DOM元素通过push方法添加到myRefs数组中。

onMounted(() => {
  for(let i=0; i < components.length; i++) {
    myRefs.value.push($refs[`component${i}`]);
  }
  console.log(myRefs.value);
});

完整的修改代码如下：

<template>
  <edo-nav></edo-nav>
  <main>
    <component v-for="(component, index) in components" :key="component" :is="component" :ref="`component${index}`" />
  </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(() => {
  for(let i=0; i < components.length; i++) {
    myRefs.value.push($refs[`component${i}`]);
  }
  console.log(myRefs.value);
})
</script>

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

这样修改后，你应该能正确获取到循环组件中每个组件的DOM元素。

【相关推荐】

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7430677
• 这篇博客你也可以参考下：vue3.0获取dom节点
• 除此之外, 这篇博客: vue3.0中使用ref获取dom元素中的 打印结果： 部分也许能够解决你的问题。