在学习插槽之前，首先应该要了解在什么情况下会用到插槽，如果不理解的话可能会对插槽有错解，既然衍生出插槽这个组件肯定是在实际开发中有用途的。
先看一下这张图片：
在开发这这几个导航栏的时候，如果用component组件开发的话，首先用一个父组件（容器）包裹里面的内容，就拿上面三个图来讲，就要写三个子组件，如果要是10个类似这种导航栏就会延长开发周期。
这个时候如果用slot的话，也是先用父组件做一个包裹，取出这几个组件共同的部分，样式及功能只需在slot中写一次即可，剩下就交给子组件入参及加功能。当然会有小伙伴会问没有共同的部分怎么办，这个时候就得自由发挥，也可以component跟slot一起用。下面就来看一下插槽的定义、分类及使用
二.插槽的定义
插槽的定义：插槽也是一种组件，并且可以传参
三.插槽的分类
插槽的分类：匿名插槽、具名插槽、作用域插槽
四.插槽的使用
1.匿名插槽
子组件：test.vue
<template>
<div class="test">
<slot>我是子组件的匿名插槽</slot>
</div>
</template>
父组件：index.vue
<template>
<test-index>
我是父组件
</test-index>
</template>
展示的结果： 我是父组件
2.具名插槽
使用方法：定义插槽的时候给个name属性 ,在引用组件的时候，,其中的v-slot:test可以写成#test
子组件:test.vue
<template>
<div class="test">
<slot>我是子组件的匿名插槽</slot>
<header>
<slot name="header">头部</slot>
</header>
<main>
<slot>内容</slot>
</main>
<footer>
<slot name="footer">尾部</slot>
</footer>
</div>
</template>
父组件：index.vue
<template>
<test-index>
我是父组件
<template v-slot:footer></template>
</test-index>
</template>
展示的结果：
我是父组件（替换了匿名插槽）
头部 （任何没有被包裹在带有 v-slot 的 中的内容都会被视为默认插槽的内容）
我是父组件 （替换了匿名插槽）
我是父组件调用的footer插槽 （带有v-slot：footer的属性会覆盖掉子组件所定义的插槽name属性为footer的内容）
用vue官网上的话来说就是：现在 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 中的内容都会被视为默认插槽的内容。
3.作用域插槽
子组件：test.vue
<template>
<div class="test">
<slot :data="name" :data1="age">我是子组件的普通插槽{
{
name}}</slot>
</div>
<template>
<script>
export default {
data() {
return {
name:'testtest',
age:10
};
}
};
</script>
父组件：index.vue
<template>
<test-index>
<template slot-scope="name">{
{
name}}{
{
name.data }}{
{
name.age}}</template>
</test-index>
</template>
展示的结果：
{ “data”: “testtest”,“data1”:10 }testtest10
对于slot-scope=""中值没有要求，一般来说只要不取关键字就行，当然子组件要是传两个值过来，父组件这边拿到的就是两组键值对，key对应着子组件的key，value对应子组件的value（即key:“data”,value:“name”）
注意：作用域插槽的拿到的值是一个对象key为data，value则是子组件传过去的值
总结：匿名插槽，具名插槽使用必须父子组件的name对应，作用域插槽通常用于传递数据，多用于子组件将数据传递父组件