在另一个组件中动态渲染 Vue 组件

Question

使用Vue 3.2.41-@heroicons/vue 2.0.14-inertiajs 1.0-vite 4.0.0

我正在使用这个调用 Vue 组件：

该组件如下所示：

<template>
    <component :is="icon" /> <!-- doesn't work -->
    <CalendarDaysIcon /> <!-- works -->
</template>

<script setup>
    import {
        CalendarDaysIcon,
    } from '@heroicons/vue/20/solid'

    const props = defineProps(['icon'])
</script>

渲染的 HTML 是这样的：

<calendardaysicon></calendardaysicon> <!-- not what I want -->
<svg> ... </svg> <!-- correct but not dynamic -->

换句话说，当我希望 渲染组件时，它只是渲染一些空的 标记。我可以看到它已将其变为小写，并且不知道如何将其强制返回 PascalCase，我什至不确定这是否会对情况有所帮助。

我稍微简化了代码，但完整版本将有一个包含 10 个不同图标的列表（使用 PascalCase 名称的 Heroicons 包的所有部分），我希望能够从主组件轻松调用它们.

Answer 1

尝试：

Answer 2

使用仅使用包含CalendarDaysIcon的字符串

相反，在主组件中，传递实际的组件引用，如下所示：

<template>
  <TimelineItem :icon="CalendarDaysIcon" />
</template>

<script setup>
    import {
        CalendarDaysIcon,
    } from '@heroicons/vue/20/solid'

    const props = defineProps(['icon'])
</script>

然后，在TimelineItem组件中，不需要引用任何图标：

<template>
    <component :is="icon" /> <!-- now works -->
</template>

<script setup>
    const props = defineProps(['icon'])
</script>

感谢 Inertia Discord 服务器上的 @Robert Boes 的指导。