vue slot介绍

Posted myspecialzone

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

     

以上是关于vue slot介绍的主要内容,如果未能解决你的问题,请参考以下文章