How to pass component as props in vue 3 composition api?

Question

i want to pass props customActionComponent as component and need to render in child component

FlightDetail.vue

<template>
  <ComponentCard
    title="Flight Details"
    subtitle="March 25th"
    :tableComponent="FlightDetailTable"
    :actionComponent="customActionComponent"
  />
</template>

<script setup>
import ComponentCard from '@/components/ComponentCard.vue'
import FlightDetailTable from '@/components/FlightDetailTable.vue'

const customActionComponent = {
  template: `
      <v-row align="center">
      <v-col>
        <v-btn class="rounded-pill ml-3 custom-button">
          <v-icon>mdi-arrow-left</v-icon>
        </v-btn>
      </v-col>
      <v-col class="d-flex justify-end">
        <v-btn class="rounded-pill custom-button">
          Flight
        </v-btn>
        <v-btn class="rounded-pill ml-4 mr-4 custom-button">
          Delay
        </v-btn>
      </v-col>
    </v-row>`,
}
</script>

<style scoped>
.custom-button {
  background-color: #114b5f;
  color: white;
  font-weight: bold;
}
</style>

ComponentCard.vue

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  title: String,
  subtitle: String,
  tableComponent: Object,
  actionComponent:Object,
});
</script>

<template>
  <v-card variant="text">
    <v-card-item>
      <v-card-title style="color: #114b5f;">{{  props.title }}</v-card-title>
      <v-card-subtitle style="color: #114b5f;">{{ props.subtitle }}</v-card-subtitle>
    </v-card-item>
    <v-card-text>
      <component :is="props.tableComponent" />
    </v-card-text>
    <v-card-actions v-if="props.actionComponent">
      <component :is="props.actionComponent" />
    </v-card-actions>
  </v-card>
</template>

tableComponent can render successfully but can't visible actionComponent.

what is the best way to define customActionComponent and pass as props in child component

Answer 1

customActionComponent is a component object that hasn't been compiled by Vue. If you want to let it work, replace https://unpkg.com/vue@3/dist/vue.esm-browser.js with https://unpkg.com/vue@3/dist/vue.esm.js in your import map to include a compiler. This may bring a larger size to your app.

If possible, it is recommended to use slots.

Answer 2

I would definitely use named slots here. I don't see why you would want to do this with props.

Answer 3

Instead of passing the whole component as props you can pass the component name and leverage it in the child component with defineAsyncComponent

eg: Inside the script tag add this

 const components = {
  Table: defineAsyncComponent(() => import("@/components/Table.vue")),
  UserForm: defineAsyncComponent(() => 
  import("@/components/UserForm.vue")),
 };

 const componentResolver = ref<any>();

 // Now based on the component passed you can choose
 componentResolver.value = components[props.component];

 // Now in the template you can have this
 <Component
       :is="componentResolver"
     />