뷰는

2017-04-12 1 views
1

내가 내 템플릿 마크 업까지이 안에 이름 슬롯을 사용하려는 반응 메뉴 구성 요소가 포장 할 때 슬롯이 작동하지 않는 이름 완벽하게 괜찮습니다 :뷰는

<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 구성 요소의 직접적인 자식이어야하는 것으로 보이는가?

+0

음 .. 나는 당신의 [사건] (http://jsfiddle.net/1t2puwtw/1/) 재현하고 그것을 작동? –

+0

@AmreshVenugopal 헤더 슬롯을 사용 중이지만 html에는이 슬롯에 대한 참조가 없습니다. 그것이 단순히 기본 슬롯 콘텐츠로 돌아가는 것을 의미합니다. –

+0

그런데'.vue' 구성 요소와 함께 webpack을 사용하고 있습니다. webpackbin 파일을 만들어 실행할 수 있다면 시도 할 것입니다. –

답변

4

"포장 된 슬롯"이 반응 형 메뉴 태그의 직접 하위가 아니기 때문에 작동하지 않습니다. 그런

시도 뭔가 :

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

jsfiddle

+1

슬롯이 직접적인 자식 일 필요는 없습니다. –

+0

나는 이것을 시험해 보았고 직접적인 자식 일 필요는 없다. https://www.webpackbin.com/bins/-KhXJnhf2meOIC9h5XS0이 예제에는 문제가있다. 왜냐하면 이름이 지정된 슬롯을 둘러싸고있는 내 템플릿의 모든 마크 업 완전히 사라졌습니다. 그리고 현재의 코드베이스에서는 여전히 올바르게 작동하지 않습니다. –

+0

나는 슬롯이 직접적인 아이가 될 필요가 있음을 확신한다. 내 바이올린을 확인하십시오 – donMateo