写在前面
slot插槽在vue的开发中是比较基础又比较常用的，使用插槽语法可以使语法变得更加简洁。
什么是slot插槽
说白了就是父组件想在子组件里插入内容，这个内容怎么放放在哪就是由slot插槽来负责分发的。
slot的使用
- 普通用法->匿名插槽
<!-- 父组件-->
<template>
<div id="parent">
<children>
<p>我是插槽内容</p>
</children>
</div>
</template>
<!--子组件 -->
<template>
<div id="childern">
<h2>我是子组件</h2>
<span><slot></slot></span>
</div>
</template>
运行结果
上述代码就是父组件传入内容对应的显示到子组件slot的插槽中，当然子组件的插槽中可以有自己的内容，当父组件没有传递值给子组件时，会默认显示子组件slot中的内容。也可以把子组件slot中的内容理解为默认值。
- 具名插槽 如果想规定父组件插入内容的显示位置，就要用到具名插槽的name属性，给每一插槽定义一个专属的名字。
<!--父组件 -->
<template>
<div id="parent">
<children>
<h1 slot="header">我是头部</h1>
<h2 slot="content">我是内容</h2>
<h3 slot="footer">我是底部</h3>
</children>
</div>
</template>
<!-- 子组件-->
<template>
<div id="childern">
<span><slot name="header"></slot></span>
<span><slot name="content"></slot></span>
<span><slot name="footer"></slot></span>
<span><slot name="default">我是默认内容</slot></span>
</div>
</template>
运行结果
上述代码我们看到父组件的内容通过name属性对应的插入到了子组件中，而没有接收到传递值得子组件slot插槽就直接显示了默认值。
- 作用域插槽 简单来说，前两种插槽的内容和样式皆由父组件决定，也就是说显示什么内容和怎样显示都由父组件决定；但是第三种插槽就不同了，作用域插槽的样式由父组件决定，内容却由子组件控制。简单来说：前两种插槽不能绑定数据，作用域插槽是一个带绑定数据的插槽。
<!-- 父组件 -->
<template>
<div id="parent">
<children>
<template slot="zhang" slot-scope="user">
<!-- 需要使用 template 包裹 -->
<div v-for="item in user" :key="item.name">
<p>{{ item }}</p>
</div>
</template>
</children>
</div>
</template>
<!-- 子组件-->
<template>
<div id="childern">
<span><slot name="header" :user="user"></slot></span>
<span><slot name="content"></slot></span>
<span><slot name="footer"></slot></span>
<span><slot name="default">我是默认内容</slot></span>
</div>
</template>
运行结果
