vue中slot的作用

1，用法一：slot作为标签使用

父组件：

<div>
  <slotchild>
    我不应该显示出来
</slotchild>

</div>

 子组件：slotchild.vue
<div>
  <span> 我应该显示的</span>
</div>

 理论上父组件里应该写<slotchild  />，以上的代码<slotchild></slotchild>即使中间插入了其他内容也是无效的，不显示。
为了能够显示中间的内容，使用slot即可：

子组件：slotchild.vue

<div>
    <slot></slot>
    <span>我应该显示的</span>
</div> 

这样，父组件就可以往<slotchild></slotchild>中间插入了，且内容显示在<slot></slot>的位置。

2，用法二：slot作为属性使用

<span   label ="大 &nbsp; 海" >   开心   </span>

希望的效果是大海中间有空格：大   海 ，但是实际打印的效果是：大&nbsp;海，也就是说属性中是不允许以&nbsp;的方式添加空格的，这个时候使用slot代替label属性的内容：

<span>
     <p  slot= "label" >  大&nbsp;海 </p>
     开心
</span>

 这个时候就能正常显示  “大  海”  的提示标签了，此时slot的作用相当于代替父级标签的某个属性值