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公司命名时包裹

回答

相关问题