Vue3中基于API返回__typename动态渲染组件失败求助

核心问题 #

在Vue3的<script setup>语法中，你定义的组件变量属于局部作用域，模板无法直接通过字符串（比如item.__typename）匹配到这些组件；而且动态组件的:is属性需要接收组件对象，而非字符串名称（除非组件是全局注册的）。另外你的v-for里使用:key="item.id"，但API返回的组件项里没有id字段，会触发key重复的警告。

修复步骤 #

1. 创建组件映射表
   把__typename字符串和对应的组件对象做映射，让模板能通过字符串找到对应的组件：

<script setup>
import { defineAsyncComponent } from 'vue'
import { useHomeQuery } from '@/generated/operations'

// 建立__typename与组件的映射关系
const componentMap = {
  ComponentWebComponentsFooterWidget: defineAsyncComponent(() => import('../components/Hero1.vue')),
  ComponentWebComponentsImage: defineAsyncComponent(() => import('../components/Hero2.vue')),
  ComponentWebComponentsImageText: defineAsyncComponent(() => import('../components/Hero3.vue'))
}

const { result, loading: queryLoading, error } = useHomeQuery({})
</script>

2. 修改模板渲染逻辑
   通过映射表获取组件对象，修复key的唯一性问题，同时处理数据未加载的状态：

<template>
  <!-- 先判断数据是否加载完成 -->
  <div v-if="result">
    <div 
      v-for="(item, index) in result.home.data.attributes.webcomponents" 
      :key="`${item.__typename}-${index}`"
    >
      <!-- 通过映射表拿到组件对象，传递item数据给组件 -->
      <component :is="componentMap[item.__typename]" :component-data="item" />
    </div>
  </div>
  <!-- 加载状态提示 -->
  <div v-else-if="queryLoading">加载中...</div>
  <!-- 错误提示 -->
  <div v-else-if="error">加载失败：{{ error.message }}</div>
</template>

3. （可选）子组件接收数据
   如果子组件需要使用API返回的title等字段，可在子组件中通过defineProps接收传递的component-data：
   比如Hero3.vue：

<script setup>
const props = defineProps({
  componentData: Object
})
</script>

<template>
  <h2>{{ componentData.title }}</h2>
</template>

为什么Vue2能正常运行？ #

Vue2的选项式API中，components选项里注册的组件会挂载到Vue实例的全局作用域，模板可以直接用组件名称的字符串渲染动态组件。但Vue3的<script setup>是局部作用域，不会自动暴露变量到全局，因此必须手动建立映射关系。

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