Vue之单个solt

官网的原文是这样的：
最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。
首先来看看我的代码结构：
模板：
<pre>

 <div class="fathercomponent">
    <h1>我是父组件的标题</h1>
    <child-component>
        <p>初始化内容1</p>
        <p>初始化内容2</p>
    </child-component>
</div>

</pre>
script部分：
<pre>
var child = {
template:'<div><h1>我是子组件的标题</h1><slot>只有没有初始化内容的时候我才会出现</slot></div>'
}
</pre>
<pre>
new Vue({
el:'.fathercomponent',
components:{
'child-component':child,
}
});
</pre>
运行效果如下：

QQ截图20170630170252.png

运行效果如预料中的一般。
于是我把p标签给注释掉：

QQ截图20170630170523.png

结果运行如下：

Paste_Image.png

slot里的内容并没有出现，p也没有消失
在这里我发现注释掉p是没有办法实现的，只有直接删除掉p才能使slot里的内容显示出来

Paste_Image.png

再次运行效果如下：

Paste_Image.png