Vue 3에서는 슬롯 콘텐츠를 안정적으로 처리할 수 있는 방법이 없나요?
<p>현재 Vue 2 코드베이스를 Vue 3으로 마이그레이션하는 중입니다. </p>
<pre class="brush:php;toolbar:false;"><카드>
<템플릿 #기본값>
<카드 헤더>
<title level="3">헤더</title>
</카드 헤더>
<카드 본문
v-for="bodyCount의 b"
:key="'b' + b">
본문 {{ b }}
</카드 본문>
<카드 바닥글
v-for="footerCount의 f"
:key="'f' + f">
<text>바닥글 {{ f }}</text>
</카드바닥글>
</템플릿>
</카드></pre>
<p>카드 구성 요소에는 <code>this.$slots.default()</code>를 호출하는 렌더링 함수가 있습니다. 그러나 Vue 3에서는 Vue 2와 다른 콘텐츠를 반환합니다. 따라서 <code>console.log(this.$slots.default())</code>를 수행하면 3개의 요소가 있는 배열을 얻습니다. Symbol(Fragment), Symbol(Fragment) 유형의 v 노드]</p>
<p>더 구체적으로 말하면 카드 바닥글/카드 본문을 구성 요소로 인식하지 않고 대신 유형에 기호(조각)가 표시됩니다. 카드 헤더는 v-for 루프 내부에 있지 않기 때문에 실제로는 괜찮습니다. </p>
<p>카드 구성요소의 렌더링 기능 내부에는 텍스트/바닥글 구성요소 수를 알아야 하는 논리가 있습니다. 그래서 구성 요소 유형을 알 수 있어야 합니다. Vue 3에서는 불가능합니까? 나는 이것이 여기서 v-for와 관련이 있다고 추측할 수 있지만 실제로 최종 v-노드를 얻는 방법을 잘 모르겠습니다. 이 예에서는 3개의 요소 대신 배열에 카드 헤더 + 모든 카드 본문 + 모든 카드 바닥글이 포함되기를 원합니다. </p>
