Rendre dynamiquement un composant Vue dans un autre composant

Question

Utilisation deVue 3.2.41-@heroicons/vue 2.0.14-inertiajs 1.0-vite 4.0.0

J'utilise ceci pour appeler le composant Vue :

Le composant ressemble à ceci :

<template>
    <composant :est="icône" />!-- ne fonctionne pas -->
    <CalendarDaysIcon /> <!-- fonctionne -->
</modèle>

<configuration du script>
    importer {
        Icône Jours du Calendrier,
    } de '@heroicons/vue/20/solid'

    const props = définirProps(['icône'])
</script>

Le code HTML rendu ressemble à ceci :

<calendardaysicon></calendardaysicon> <!-- pas ce que je veux -->
<svg> ... </svg> <!-- correct mais pas dynamique -->

En d'autres termes, lorsque je veux que restitue le composant, il restitue simplement un ; marque. Je peux voir qu'il l'a changé en minuscules et je ne sais pas comment le forcer à revenir à PascalCase, je ne suis même pas sûr que cela aiderait la situation.

J'ai un peu simplifié le code, mais la version complète aura une liste de 10 icônes différentes (toutes les parties du package Heroicons utilisant les noms PascalCase) et je veux pouvoir les appeler facilement à partir du composant principal .≪/p>

Answer 1

Essayez :

Answer 2

Utilisez 仅使用包含CalendarDaysIcon cordes

Au lieu de cela, dans le composant principal, transmettez la référence réelle du composant comme ceci :

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

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

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

Ensuite, dans le composant TimelineItem, il n'est pas nécessaire de référencer une quelconque icône :

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

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

Merci à @Robert Boes sur le serveur Inertia Discord pour les conseils.