Vue之单个solt

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

 

我是父组件的标题

初始化内容1

初始化内容2


script部分:

var child = {
template:'

我是子组件的标题

只有没有初始化内容的时候我才会出现
'
}


new Vue({
el:'.fathercomponent',
components:{
'child-component':child,
}
});

运行效果如下:


Vue之单个solt_第1张图片
QQ截图20170630170252.png

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

Vue之单个solt_第2张图片
QQ截图20170630170523.png

结果运行如下:

Vue之单个solt_第3张图片
Paste_Image.png

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

Vue之单个solt_第4张图片
Paste_Image.png

再次运行效果如下:

Vue之单个solt_第5张图片
Paste_Image.png

你可能感兴趣的:(Vue之单个solt)