我们知道vue项目通常由多个组件构成。然而在使用父子组件的时候，总想在父组件中自定义一些标签来插入到内部子组件中，而在vue2.1.0+新增了一种插槽机制。
插槽子组件中给你的HTML模板占了一个位置。插槽又分为 匿名插槽、具名插槽、作用域插槽。
1.匿名插槽
当slot没有指定name属性值的时候，它隐藏的name属性为default。一个组件内只有有一个匿名插槽。
父组件:
<template>
<div>
<h2>我是父组件</h2>
<child>
<p>我是默认的插槽</p>
</child>
</div>
</template>
子组件: child.vue
<template>
<div>
<div>我是子组件</div>
<slot></slot>
</div>
</template>
2.具名插槽
具名插槽就是给插槽进行命名。父组件在调用的时候，可以使用v-slot绑定名称从而实现对应，v-slot也可以缩写为# 。
子组件:
<template>
<div class="nav-bar">
<!-- <slot name="default"></slot> -->
<div class="left">
<slot name="left1"></slot>
</div>
<div class="center">
<slot name="center1"></slot>
</div>
<div class="right">
<slot name="right1"></slot>
</div>
</div>
</template
父组件:
<template>
<div>
<my-slot-cpn1>
<template v-slot:left1>
<button>左边按钮</button>
</template>
<template #center1>
<button>我是中间按钮</button>
</template>
<template #right1>
<button>右边按钮</button>
</template>
</my-slot-cpn1>
</div>
3.作用域插槽
当你想在一个插槽中使用数据时，就要使用作用域插槽的方式。
为了让 子组件中的数据 在父级的插槽 内容中可用我们可以将 数据 作为 元素的一个特性绑定上去： v-bind:text="text"。
注意：
匿名的作用域插槽和具名的作用域插槽 区别在v-slot:defult="接受的名称"(defult(匿名的可以不写，具名的相反要写的是对应的name))
v-solt可以解构接收 解构接收的字段要和传的字段一样才可以 例如 :one 对应 v-slot="{one}"