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組件的直接子項？

來源

2017-04-12 Stephan-v

嗯..我轉載你的[案例]（http://jsfiddle.net/1t2puwtw/1/）和它的作品？ –

@AmreshVenugopal你正在使用一個標題槽，但你的html沒有任何參考這個插槽。這意味着它將簡單地回退到它的默認插槽內容。 –

順便說一句，我使用'.vue'組件的webpack，我會嘗試如果我可以得到一個webpackbin文件啓動和運行。 –

它不起作用，因爲您的「包裝插槽」不是響應式菜單標籤的直接子。

嘗試類似的東西：

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

jsfiddle

來源

2017-04-12 13:20:32 donMateo

該插槽不需要是直接的孩子。 –

我已經試過了，它不需要是直接的孩子：https://www.webpackbin.com/bins/-KhXJnhf2meOIC9h5XS0這個例子有一個問題，雖然因爲我的模板中圍繞指定槽的所有標記已經完全消失了。而在我目前的代碼庫中，我仍然無法正常工作。 –

我很確定那個插槽需要是一個直接的孩子。檢查我的小提琴 – donMateo

Vue公司命名時包裹

回答

相關問題