Vue3动态组件为何无法传递对象数组至子组件？

可能的原因及对应修复方法 #

1. 确认activeResults是正确的组件引用 #

如果activeResults是字符串形式（比如"ResultSimple"），需确保组件已全局注册或在当前组件的components选项中局部注册。如果是直接引用组件对象，要确保导入路径正确：

<script setup>
import ResultSimple from './ResultSimple.vue'
// 假设需切换的另一个组件
import ResultDetail from './ResultDetail.vue'

// 确保activeResults指向组件对象或已注册的组件名
const activeResults = ref(ResultSimple) // 或 ref('ResultSimple')（需提前注册组件）
</script>

2. 检查目标组件的Props定义 #

确认activeResults指向的组件（如ResultSimple）正确声明了result和index props，类型要匹配传递的数据：

<!-- ResultSimple.vue -->
<script setup>
const props = defineProps({
  result: {
    type: Object, // 匹配你传递的对象类型
    required: true
  },
  index: {
    type: Number,
    required: true
  }
})
</script>

3. 修正动态组件的Key值 #

当前:key="result"可能因对象引用重复导致渲染异常，建议改用唯一标识作为Key，比如result.id（如果数据有唯一ID）或index：

<component
  :is="activeResults"
  v-for="(result, index) in myResults"
  :result="result"
  :index="index"
  :key="result.id || index"
/>

4. 排查组件名拼写/格式错误 #

如果activeResults是字符串类型的组件名，确保没有额外空格或拼写错误，比如误写为" ResultSimple "（带空格）会导致Vue无法识别组件。

验证步骤 #

• 在父组件中打印activeResults，确认其值为正确的组件对象或已注册的组件名：

console.log(activeResults.value) // 应输出组件对象或合法的组件名字符串

• 在目标组件中打印props，确认是否接收到正确数据：

// ResultSimple.vue
console.log(props.result) // 应输出具体对象内容，而非"[object Object]"

内容的提问来源于stack exchange，提问作者user13928344