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>

四.最新写法v-slot

     child.vue

<template>
    <h3>标题</h3>
    <p>27</p>
    <p>前端开发</p>
</template>

    parent.vue

//方法一
<child>
   <template v-slot:content="personInfo">//personInfo可以自定义
     <p>{{personInfo.age}}</p>
     <p>{{personInfo.job}}</p>
   </template>
</child>
//方法二
<child>
   <template v-slot:content="{age,job}">//直接用es6对象结构
     <p>{{age}}</p>
     <p>{{job}}</p>
   </template>
</child>
//简写方式
<child>
   <template #content="{age,job}">
     <p>{{age}}</p>
     <p>{{job}}</p>
   </template>
</child>

渲染结果:

<template>
    <h3>标题</h3>
    <p>27</p>
    <p>前端开发</p>
</template>