Vue: 구성 요소를 손자의 중첩 된 명명 된 슬롯에 전달하면 기본 슬롯에서 확인됩니다.

버전

2.5.2

복제 링크

https://jsfiddle.net/daxchen/k75y6tu0/

재현 단계

내 사용 사례는 툴바와 기본 콘텐츠 래퍼가있는 기본 레이아웃이 있다는 것입니다. 그러나 일부 페이지에는 SearchBar 하고 일부는 필요하지 않으며 레이아웃에는 다른 수준이있을 수 있습니다.

그래서 다른 레이아웃에서 사용할베이스로 LayoutDefault 라는 구성 요소를 만들었습니다. 그리고 필요할 때 기본 도구 모음을 대체 할 수 있기를 원하기 때문에 기본 도구 모음을 <slot name="toolbar"> 에 넣고 Toolbar 를 대체 콘텐츠로 사용합니다.

코드 조각 :

// LayoutDefault.vue
<slot name="toolbar">
  <Toolbar title="title from layout-inner">
    <slot name="toolbarSlot"></slot>
  </Toolbar>
</slot>

다음을 수행 할 수 있기 때문에 이러한 종류의 구성 요소를 만듭니다.

1. 필요한 경우 기본 도구 모음을 교체합니다.
2. 기본 툴바를 사용하지만 슬롯에 항목을 전달합니다 (위의 예에서 "toolbarSlot" ).

그런 다음 다른 레이아웃 구성 요소에서 다음을 수행합니다.

// LayoutLv1.vue
<div class="layout">
  <LayoutDefault>
    <slot name="toolbar" slot="toolbar"></slot>
    <slot name="toolbarSlot" slot="toolbarSlot"></slot>
    <slot>default content from Layout</slot>
  </LayoutDefault>
</div>

보시다시피 구성 요소를 손자의 슬롯에 전달하기 위해 <slot name="foo" slot="foo"> 패턴을 사용했습니다.

어떤 이유로이 패턴을 사용하여 전달 된 구성 요소가있는 경우 기본 슬롯 으로 전달됩니다.

복제의 예 2, 3 및 4를 참조하십시오.

무엇을 기대합니까?

명명 된 슬롯에 아무것도 전달되지 않으면 대체 콘텐츠가 해당 슬롯과 함께 렌더링 될 것으로 예상합니다.

실제로 무슨 일이 일어나고 있습니까?

예 2에서 교체 된 Toolbar 는 LayoutDefault 의 기본 슬롯에서 렌더링됩니다.

예제 3 및 4에서 SearchBar 는 slot="toolbarSlot" 로 전달되지만 렌더링되지는 않습니다.

이것이 예상 된 동작입니까?
또는 각 기본 부품을 교체 할 수있는 이러한 종류의 재사용 가능한 레이아웃을 만들고 기본 부품을 사용하는 경우 구성 요소를 (기본 부품) 슬롯에 전달할 수있는 방법이 있습니까?