使用Vue 3.2.41-@heroicons/vue 2.0.14-inertiajs 1.0-vite 4.0.0
我正在使用这个调用 Vue 组件：
该组件如下所示：
2
1231<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 -->
换句话说，当我希望
我稍微简化了代码，但完整版本将有一个包含 10 个不同图标的列表（使用 PascalCase 名称的 Heroicons 包的所有部分），我希望能够从主组件轻松调用它们.
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
尝试：
使用
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的指导。