Rendern Sie eine Vue-Komponente dynamisch innerhalb einer anderen Komponente

Question

Verwenden vonVue 3.2.41-@heroicons/vue 2.0.14-inertiajs 1.0-vite 4.0.0

Ich verwende dies, um die Vue-Komponente aufzurufen:

Die Komponente sieht folgendermaßen aus:

<template>
    <component :is="icon> <!-- funktioniert nicht -->
    <CalendarDaysIcon /> <!-- funktioniert -->
</template>

<Skript-Setup>
    importieren {
        CalendarDaysIcon,
    } von '@heroicons/vue/20/solid'

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

Der gerenderte HTML-Code sieht folgendermaßen aus:

<calendardaysicon></calendardaysicon>!-- nicht das, was ich will -->
<svg> ... </svg> <!-- korrekt, aber nicht dynamisch -->

Mit anderen Worten, wenn ich möchte, dass die Komponente rendert, wird nur ein leerer gerendert ; markieren. Ich kann sehen, dass es in Kleinbuchstaben geändert wurde, und ich weiß nicht, wie ich es wieder auf PascalCase zurücksetzen kann. Ich bin mir nicht einmal sicher, ob das der Situation helfen würde.

Ich habe den Code etwas vereinfacht, aber die Vollversion wird eine Liste mit 10 verschiedenen Symbolen haben (alle Teile des Heroicons-Pakets verwenden PascalCase-Namen) und ich möchte sie einfach von der Hauptkomponente aus aufrufen können .

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 的指导。