<p>使用<strong>Vue 3.2.41</strong>-@heroicons/vue 2.0.14-inertiajs 1.0-vite 4.0.0</p>
<p>我正在使用这个调用 Vue 组件：</p>
<p><code><TimelineItem icon="CalendarDaysIcon" /></code></p>
<p>该组件如下所示：</p>
<pre class="brush:php;toolbar:false;"><template>
<component :is="icon" /> <!-- doesn't work -->
<CalendarDaysIcon /> <!-- works -->
</template>
<script setup>
import {
CalendarDaysIcon,
} from '@heroicons/vue/20/solid'
const props = defineProps(['icon'])
</script></pre>
<p>渲染的 HTML 是这样的：</p>
<pre class="brush:php;toolbar:false;"><calendardaysicon></calendardaysicon> <!-- not what I want -->
<svg> ... </svg> <!-- correct but not dynamic --></pre>
<p>换句话说，当我希望 <code><component :is /></code> 渲染组件时，它只是渲染一些空的 <code><calendardaysicon></code> 标记。我可以看到它已将其变为小写，并且不知道如何将其强制返回 PascalCase，我什至不确定这是否会对情况有所帮助。</p>
<p>我稍微简化了代码，但完整版本将有一个包含 10 个不同图标的列表（使用 PascalCase 名称的 Heroicons 包的所有部分），我希望能够从主组件轻松调用它们.</p>
2
1070
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
尝试：
使用
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的指导。