다른 구성 요소 내에서 Vue 구성 요소를 동적으로 렌더링
<p>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;"><템플릿>
<comComponent :is="icon" /> <!-- 작동하지 않습니다 -->
<CalendarDaysIcon /> <!-- 작동합니다 -->
</템플릿>
<스크립트 설정>
수입 {
달력일아이콘,
} '@heroicons/vue/20/solid'에서
const props = 정의Props(['icon'])
<p>렌더링된 HTML은 다음과 같습니다.</p>
<pre class="brush:php;toolbar:false;"><calendardaysicon></calendardaysicon> <!-- 내가 원하는 것은 아닙니다 --->
<svg> ... </svg> <!-- 정확하지만 동적이 아님 --></pre>
<p>즉,
모든 응답(2)나는 대답할 것이다
P粉1077720152023-08-31 12:44:09
문자열을 CalendarDaysIcon 사용하세요
대신 메인 구성 요소에서 다음과 같이 실제 구성 요소 참조를 전달하세요.
으아악
그런 다음 TimelineItem 구성 요소에서는 아이콘을 참조할 필요가 없습니다.
으아악
Inertia Discord 서버의 @Robert Boes에게 안내해 주셔서 감사합니다.
회신하다
0
