Memaparkan komponen Vue secara dinamik dalam komponen lain

Question

MenggunakanVue 3.2.41-@heroicons/vue 2.0.14-inertiajs 1.0-vite 4.0.0

Saya menggunakan ini untuk memanggil komponen Vue:

Komponen kelihatan seperti ini:

<template>
    <komponen :is="ikon" <!-- tidak berfungsi -->
    <CalendarDaysIcon /> <!-- berfungsi -->
</template>

<persediaan skrip>
    import {
        CalendarDaysIcon,
    } daripada '@heroicons/vue/20/solid'

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

HTML yang diberikan kelihatan seperti ini:

Answer 1

Cuba:

Answer 2

String menggunakan 仅使用包含CalendarDaysIcon

Sebaliknya, dalam komponen utama, luluskan rujukan komponen sebenar seperti ini:

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

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

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

Kemudian, dalam komponen TimelineItem, tidak perlu merujuk sebarang ikon:

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

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

Terima kasih kepada @Robert Boes pada pelayan Inertia Discord untuk bimbingan.