Vue에서 네스트된 컴포넌트에 슬롯을 '파이프 투게'하는 방법이 있습니까?

Vue에서 네스트된 컴포넌트에 슬롯을 '파이프 투게'하는 방법이 있습니까?

예를 들어 Vue용 확장 Popper.js를 개발하고 있으며 추가 기능을 제공한다고 가정해 보겠습니다.(자녀) 컴포넌트는 다음과 같습니다.

 <popper>
   <div :is="tag" class="popper">
     {{ content }}
   </div>
   <button class="btn btn-primary" slot="reference">
     Reference Element
   </button>
 </popper>

보시다시피 이 기능이 작동하려면 slot="reference" 속성을 가진 ".ppper" div 바로 아래에 참조 요소를 정의해야 합니다.

질문:

확장 포퍼 컴포넌트를 재사용 가능한 엔티티로 변환하는 방법(일명 슬롯된 데이터를 간접적으로 전달할 수 있음)<enhanced-popper> //referenced element// </enhanced-popper>slot="reference" 속성을 자녀(ppper.pair-based) 구성 요소 내에 포함하도록 설정하시겠습니까?

기능하지 않은 점:

슬롯을 채용하여 부모 컴포넌트에 의해 전달된 컴포넌트에 속성을 포함시켜도 렌더링되지 않기 때문에 원하는 결과를 얻을 수 없습니다.

  <popper>
   <div :is="tag" class="popper">
    {{ content }}
   </div>
   <slot></slot>
 </popper>

속성을 확실히 하기 위해 자 컴포넌트 내의 해당 버튼을 슬롯 내의 이름 있는 슬롯으로 대체하고 확장 포퍼에서는 다음과 같이 처리하려고 했습니다.

<slot name="reference">
 <slot></slot>
</slot>

이렇게 하면 첫 번째 슬롯된 컴포넌트는 속성을 가지며 거의 동작하지만, 두 개의 "슬롯 레이어"가 있기 때문에(이것을 어떻게 부르는지는 알 수 없습니다), 참조된 컴포넌트는 아이로서의 첫 번째 컴포넌트가 아니며, Popper가 잘못 배치됩니다.

건배, 파코

언급URL : https://stackoverflow.com/questions/47654685/is-there-a-way-to-pipe-together-slots-in-nested-components-in-vue