Vue 명명된 슬롯이 래핑되면 작동하지 않음

Vue 명명된 슬롯이 래핑되면 작동하지 않음

템플릿 마크업에서 이름 있는 슬롯을 사용하고 싶은 응답 메뉴 컴포넌트가 있습니다.

<template>
    <div class="responsive-menu">
        <div class="menu-header">
            <slot name="header"></slot>
        </div>
    </div>
</template>

이렇게 지정된 슬롯을 시도하면 완벽하게 작동합니다.

<responsive-menu>
    <h3 slot="header">Responsive menu header</h3>
</responsive-menu>

하지만 수업으로 끝내자마자 아무것도 표시되지 않습니다.

<responsive-menu>
    <div class="container">
        <h3 slot="header">Responsive menu header</h3>
    </div>
</responsive-menu>

이게 무슨 일이야?지정된 부품만 포장하면 되는 거 아닌가요?지정된 슬롯이 Vue 컴포넌트의 직계 자녀여야 한다고 생각되는 슬롯은 무엇입니까?

"랩된 슬롯"이 응답 메뉴 태그의 직계가 아니기 때문에 작동하지 않습니다.

그런 식으로 해 보세요.

<responsive-menu>
    <div class="container" slot="header">
        <h3>Responsive menu header</h3>
    </div>
</responsive-menu>

jsfiddle

Vue > = 2.6에서 작동합니다.vue 및 vue-template-compiler를 업그레이드하기만 하면 됩니다.

언급URL : https://stackoverflow.com/questions/43370275/vue-named-slots-do-not-work-when-wrapped