別のコンポーネント内で Vue コンポーネントを動的にレンダリングする
<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;"><テンプレート>
<コンポーネント :is="icon" /> <!-- 機能しません -->
<CalendarDaysIcon /> <!-- 動作します -->
</テンプレート>
＜スクリプト設定＞
輸入 {
カレンダー日アイコン、
「@heroicons/vue/20/solid」から
const props =defineProps(['icon'])
</script></pre>
<p>レンダリングされた HTML は次のようになります:</p>
<pre class="brush:php;toolbar:false;"><calendardaysicon></calendardaysicon> <!-- 私が望むものではありません -->
<svg> ... </svg> <!-- 正しいですが動的ではありません --></pre>
<p>言い換えると、<code><component :is /></code> でコンポーネントをレンダリングしたい場合、空の <code><calendardaysicon></code> をレンダリングするだけです。マーク。小文字に変更されているのはわかりますが、PascalCase に強制的に戻す方法がわかりません。それが状況を解決するかどうかもわかりません。 </p>
<p>コードを少し簡略化しましたが、完全バージョンには 10 個の異なるアイコン (PascalCase 名を使用した Heroicons パッケージのすべての部分) のリストがあり、メイン コンポーネントから簡単に呼び出せるようにしたいと考えています。 .</p>
