在另一个组件中动态渲染 Vue 组件
P粉764003519
P粉764003519 2023-08-30 20:51:07
[Vue.js讨论组]
<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;">&lt;template&gt; &lt;component :is=&quot;icon&quot; /&gt; &lt;!-- doesn't work --&gt; &lt;CalendarDaysIcon /&gt; &lt;!-- works --&gt; &lt;/template&gt; &lt;script setup&gt; import { CalendarDaysIcon, } from '@heroicons/vue/20/solid' const props = defineProps(['icon']) &lt;/script&gt;</pre> <p>渲染的 HTML 是这样的:</p> <pre class="brush:php;toolbar:false;">&lt;calendardaysicon&gt;&lt;/calendardaysicon&gt; &lt;!-- not what I want --&gt; &lt;svg&gt; ... &lt;/svg&gt; &lt;!-- correct but not dynamic --&gt;</pre> <p>换句话说,当我希望 <code><component :is /></code> 渲染组件时,它只是渲染一些空的 <code><calendardaysicon></code> 标记。我可以看到它已将其变为小写,并且不知道如何将其强制返回 PascalCase,我什至不确定这是否会对情况有所帮助。</p> <p>我稍微简化了代码,但完整版本将有一个包含 10 个不同图标的列表(使用 PascalCase 名称的 Heroicons 包的所有部分),我希望能够从主组件轻松调用它们.</p>
P粉764003519
P粉764003519

全部回复(2)
P粉697408921

尝试:

P粉107772015

使用仅使用包含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 的指导。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号