vue slot介绍

slot（插槽）属性是vue中比较常用的功能，主要分为：匿名插槽，具名插槽，作用域插槽。下面分别简单介绍下

一.匿名插槽

child.vue：

<div>
    <h3>标题</h3>
    <slot></slot>
</div>

parent.vue:

<child>
    <p>插槽内容</p>
</child>

渲染结果：

<div>
    <h3>标题</h3>
    <p>插槽内容</p>
</div>

二：具名插槽

child.vue

<div>
   <slot  name="header"></slot>
    <h3>标题></h3>
    <slot  name="footer"></slot>
</div>

parent.vue

<child>
    <p slot="header">头部</p>
    <p slot="footer">底部部</p>
</child>

渲染结果：

<div>
    <p>头部</p>
    <h3>标题</h3>
    <p>底部</p>
</div>

三.作用域插槽

child.vue

<div>
    <h3>标题</h3>
   <slot name="test" msg=‘测试信息‘></slot>
</div>

parent.vue

<child>
    <p slot-scope="props">{{props.msg}}</p>
</child>

渲染结果:

<div>
    <h3>标题</h3>
    <p>测试信息</p>
</div>

原文地址：https://www.cnblogs.com/myspecialzone/p/11430956.html