vue slot介绍

Posted 2022-09-08 myspecialzone

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>