Vue 3에서는 슬롯 콘텐츠를 안정적으로 처리할 수 있는 방법이 없나요?

Question

현재 Vue 2 코드베이스를 Vue 3으로 마이그레이션하는 중입니다.

<카드>
    <템플릿 #기본값>
        <카드 헤더>
            <title level="3">헤더</title>
        </카드 헤더>
        <카드 본문
            v-for="bodyCount의 b"
            :key="'b' + b">
            본문 {{ b }}
        </카드 본문>
        <카드 바닥글
            v-for="footerCount의 f"
            :key="'f' + f">
            <text>바닥글 {{ f }}</text>
        </카드바닥글>
    </템플릿>
</카드>

카드 구성 요소에는 this.$slots.default()를 호출하는 렌더링 함수가 있습니다. 그러나 Vue 3에서는 Vue 2와 다른 콘텐츠를 반환합니다. 따라서 console.log(this.$slots.default())를 수행하면 3개의 요소가 있는 배열을 얻습니다. Symbol(Fragment), Symbol(Fragment) 유형의 v 노드]

더 구체적으로 말하면 카드 바닥글/카드 본문을 구성 요소로 인식하지 않고 대신 유형에 기호(조각)가 표시됩니다. 카드 헤더는 v-for 루프 내부에 있지 않기 때문에 실제로는 괜찮습니다.

카드 구성요소의 렌더링 기능 내부에는 텍스트/바닥글 구성요소 수를 알아야 하는 논리가 있습니다. 그래서 구성 요소 유형을 알 수 있어야 합니다. Vue 3에서는 불가능합니까? 나는 이것이 여기서 v-for와 관련이 있다고 추측할 수 있지만 실제로 최종 v-노드를 얻는 방법을 잘 모르겠습니다. 이 예에서는 3개의 요소 대신 배열에 카드 헤더 + 모든 카드 본문 + 모든 카드 바닥글이 포함되기를 원합니다.

Answer 1

귀하의 카드 구성 요소 디자인이 제 눈에는 의미가 없어 보입니다. 다시 생각해 보시길 권합니다.

간단한 플레이그라운드 렌더링 슬롯입니다

으아악 으아악 으아악

주의사항을 꼭 지켜주세요. Vue는 구문 분석할 수 없기 때문에 여기서 렌더링 card-header하지 않습니다.

으아악

데이터에 접근할 수 있다면 왜 통과할까요 slots操作card-body/card-footer项目直接通过bodyCount?

내가 보기엔 합리적이지 않다면.

으아악 으아악 으아악

Answer 2

알고 보니 프래그먼트는 배열의 각 요소에 있는 Children 속성을 통해 확장될 수 있습니다. 따라서 이 경우 v-for는 조각인 v 노드를 생성하지만 Children 속성을 보면 더 많은 것을 추론할 수 있습니다.