Vue3组合式API中如何正确传递组件作为Props？

一、确保自定义组件的正确定义 #

在父组件FlightDetail.vue中，直接导入并传递组件对象本身，不要用字符串形式：

// FlightDetail.vue
<script setup>
import CustomActionComponent from './CustomActionComponent.vue'
import CustomTableComponent from './CustomTableComponent.vue'
import ComponentCard from './ComponentCard.vue'
</script>

<template>
  <ComponentCard 
    :table-component="CustomTableComponent" 
    :action-component="CustomActionComponent" 
  />
</template>

注意props命名采用kebab-case（短横线分隔），Vue会自动转换为子组件中的camelCase命名。

二、子组件正确接收并渲染 #

子组件ComponentCard.vue中，定义正确的props类型，并用Vue官方的<component>动态组件语法渲染：

// ComponentCard.vue
<script setup>
const props = defineProps({
  // 组件是Vue对象类型，必须指定type为Object
  actionComponent: {
    type: Object,
    required: true
  },
  tableComponent: {
    type: Object,
    required: true
  }
})
</script>

<template>
  <!-- 渲染表格组件 -->
  <component :is="props.tableComponent" />
  <!-- 渲染操作组件 -->
  <component :is="props.actionComponent" />
</template>

这是Vue官方推荐的动态渲染组件的方式，能确保传入的组件对象被正确实例化和渲染。

三、常见问题排查 #

• 不要传递组件名称字符串：比如:action-component="'CustomActionComponent'"，这会导致Vue无法识别为有效组件，必须传递导入后的组件对象。
• 检查props类型：子组件中props的type必须是Object，不能写成String或其他类型。
• 传递额外参数：如果需要给传入的组件传值，直接在<component>上绑定props即可：

  <component :is="props.actionComponent" :flight-id="currentFlightId" />
  

四、更灵活的替代方案：使用插槽 #

如果组件的位置和结构相对固定，用插槽（Slots）传递组件会更直观，无需处理props：

// FlightDetail.vue
<template>
  <ComponentCard>
    <template #table>
      <CustomTableComponent />
    </template>
    <template #action>
      <CustomActionComponent />
    </template>
  </ComponentCard>
</template>

// ComponentCard.vue
<template>
  <slot name="table" />
  <slot name="action" />
</template>

这种方式更符合Vue的组件分发逻辑，适合大多数场景。

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