如何在 vue 3 组合 api 中将组件作为 props 传递？

Question

我想将 props customActionComponent 作为组件传递，并且需要在子组件中渲染

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 可以渲染成功，但actionComponent 不可见。

定义 customActionComponent 并在子组件中作为 props 传递的最佳方法是什么

Answer 1

customActionComponent

是一个尚未被Vue编译的组件对象。如果您想让它工作，请在导入映射中将

https://unpkg.com/vue@3/dist/vue.esm-browser.js

替换为

https://unpkg.com/vue@3/dist/vue.esm.js

以包含编译器。这可能会给您的应用带来更大的尺寸。

如果可以的话，建议使用slots。

Answer 2

我肯定会在这里使用

named slots

。我不明白你为什么想用道具来做到这一点。