Vue中的 三种插槽分别为 匿名插槽，命名插槽，作用域插槽。

匿名插槽

子组件：

<div>
<li>我是老大</li>
<slot></slot>
</div>

父组件：子组件挂在在父组件上 生成标签

<div>
<son>
<li>天天</li>
</son>
</div>

父组件解译：

<div>
<li>我是老大</li>
<li>天天</li>
</div>

命名插槽

子组件;

<div>
<slot name="dada"></slot>
<li>我是老大</li>
<slot name="didi"></slot>
</div>

父组件;子组件挂在父组件上 生成标签

<div>
<son>
<li solt="dada"> 我是老太</li>
<li solt="didi">我是老小子</li>
</son>
</div>

父组件解译：

<div>
<li>我是老太</li>
<li>我是老大</li>
<li>我是老小子</li>
</div>

作用域插槽：
子组件;

<div>
<slot name="dada" up="上"></slot>
<li>我是老二</li>
<solt name="didi" down="下"></solt>
</div>

父组件：子组件挂在父组件上 生成标签

<div>
<son>
<li solt="dada" slot-scopt="st">{{st.up}}</li>
<li solt="didi" slot-scopt="st">{{st.down}}</li>
</son>
</div>

父组件编译：

<div>
<li>上</li>
<li>我是老二</li>
<li>下</li>
</div>