別のコンポーネント内で Vue コンポーネントを動的にレンダリングする

Question

使用Vue 3.2.41-@heroicons/vue 2.0.14-inertiajs 1.0-vite 4.0.0

これを使用して Vue コンポーネントを呼び出します:

コンポーネントは次のようになります:

<テンプレート>
    <コンポーネント :is="icon" /> <!-- 機能しません -->
    <CalendarDaysIcon /> <!-- 動作します -->
</テンプレート>

＜スクリプト設定＞
    輸入 {
        カレンダー日アイコン、
    「@heroicons/vue/20/solid」から

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

レンダリングされた HTML は次のようになります:

<calendardaysicon></calendardaysicon> <!-- 私が望むものではありません -->
<svg> ... </svg> <!-- 正しいですが動的ではありません -->

言い換えると、 でコンポーネントをレンダリングしたい場合、空の をレンダリングするだけです。マーク。小文字に変更されているのはわかりますが、PascalCase に強制的に戻す方法がわかりません。それが状況を解決するかどうかもわかりません。

コードを少し簡略化しましたが、完全バージョンには 10 個の異なるアイコン (PascalCase 名を使用した Heroicons パッケージのすべての部分) のリストがあり、メイン コンポーネントから簡単に呼び出せるようにしたいと考えています。 .

Answer 1

＃＃＃試す：＃＃＃＃＃＃ ＃＃＃＃＃＃＃＃＃

Answer 2

使用 CalendarDaysIcon

を含む文字列のみを使用してください

代わりに、メインコンポーネントで、次のように実際のコンポーネント参照を渡します。

リーリー

したがって、TimelineItem コンポーネントでは、アイコンを参照する必要はありません。

リーリー

Inertia Discord サーバーの @Robert Boes の指導に感謝します。