在另一個元件中動態渲染 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 的指導。