属于每次面试都会被问到，懂但是不知道咋说那种（好吧，主要是我菜我不会），所以今天专门整理一下
我学一个新东西一般都是“3W1H”
What是什么
Vue 实现了一套内容分发的 API，将<slot>元素作为承载分发内容的出口。说白了slot就是个槽口就是个坑（此坑非彼坑），你在使用组件时可以拿内容去填坑，子组件在自己的模板中去渲染父组件传递过来的内容。
Why 为什么用
丰富组件内容和布局的灵活性，增强组件的扩展性和实用性，让用户可以去更好地复用组件和对其做定制化处理
Where在哪用
其实知道了为什么用就大致知道了在哪用，这个没有硬性要求。例如如果父组件在使用到一个复用组件的时候，在不同的地方有少量的更改，这种情况没有必要去重写，此时我们就可以使用插槽。当然还需根据自己项目实际情况来，不做过多赘述
How怎么用
插槽分为三种：默认插槽、具名插槽以及作用域插槽
常规使用组件
//APP.vue
<my-slot></my-slot>
MySlot内容
<p>this is start</p>
<p>this is end</p>
effect1.png
- 默认插槽：
父组件在子组件<slot> </slot>处插入内容
<my-slot :name="name">
<p>该我表演了</p>
</my-slot>
子组件：
<p>this is start</p>
<slot></slot>
<p>this is end</p>
effect2.png
检查代码元素，发现以上代码就相当于
element.png
有的小伙伴可能会问那它有没有默认值呢，我们之前学过的很多东西都有默认值，例如函数参数，props，provide/inject等等，答案是有的，我们直接在槽口里面写入默认模版/代码即可，如
//父组件
<my-slot></my-slot>
//子组件
<p>this is start</p>
<slot><span> 如果你看到我，那我就是默认值，没有人和我玩</span></slot>
<p>this is end</p>
effect3.png
以上代码就相当于
dmslot3.png
如果我们派发不止一个元素那将显示哪个呢？第一个？最后一个？还是所有
光说没用，咱得试试
//父组件
<my-slot :name="name">
<p>该我表演了</p>
<span>瞅瞅</span>
<button>click Me! click Me!</button>
</my-slot>
effect4.png
如果我们有多个槽口呢？都显示吗？
//子组件
<p>this is start</p>
<slot><span> 如果你看到我，那我就是默认值，没有人和我玩</span></slot>
<slot><span> 如果你看到我，那我就是默认值，没有人和我玩</span></slot>
<slot><span> 如果你看到我，那我就是默认值，没有人和我玩</span></slot>
<p>this is end</p>
effect5.png
那可不，都显示了呢
还有没有问题，没有问题我提了啊。如果我要指定某元素派发到某槽口呢？例如刚刚你是发传单，见人就发，现在我只让你发给穿黄衣服的人。也就是我们现在要在父组件中，精确的在想要的位置，插入对应的内容呢，这就引出了具名插槽
- 具名插槽
怎么样能让原有插槽成为具名插槽呢，倒也简单，给插槽命一个名即可，即添加name属性。
//子组件
<p>this is start</p>
<slot name="title"
><span> 如果你看到我，那我就是默认值，没有人和我玩</span></slot
>
<slot name="con"
><span> 如果你看到我，那我就是默认值，没有人和我玩</span></slot
>
<slot name="btn"
><span> 如果你看到我，那我就是默认值，没有人和我玩</span></slot
>
<p>this is end</p>
父组件通过v-slot : name 的方式添加内容：
<my-slot>
<template v-slot:title>
<p>该我表演了</p>
</template>
<template v-slot:con>
<span>瞅瞅</span>
</template>
<template v-slot:btn> <button>click Me! click Me!</button> </template>
</my-slot>
注：为了方便，书写 v-slot:xx 的形式时，可以简写为 #xx。自己可以试试，我就不演示了
另外说一点插槽名也是有默认值的，默认值很默认，那就是default。。。例如
//子组件
<p>this is start</p>
<slot name="title"
><span> 如果你看到我，那我就是默认值，没有人和我玩</span></slot
>
<slot name="con"
><span> 如果你看到我，那我就是默认值，没有人和我玩</span></slot
>
<slot><span> 如果你看到我，那我就是默认值，没有人和我玩</span></slot>
<slot name="btn"
><span> 如果你看到我，那我就是默认值，没有人和我玩</span></slot
>
<p>this is end</p>
1.png
- 作用域插槽
插槽和模版都有编译作用域，父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。父组件不能直接使用子组件内的数据，那怎么才能访问子组件作用域，使用子组件的数据呢？我们把需要传递的内容绑到 <slot> 上，然后在父组件中用v-slot设置一个值来接收我们传递过来的数据：
//父组件
<my-slot>
<template #testdata="slotfirstProps">
{{ slotfirstProps.value1 }}
</template>
<template #default="slotsecondProps">
{{ slotsecondProps.value2 }}
</template>
</my-slot>
//子组件
<div>
<p>this is start</p>
//d1、d2都是我定义在data中的数据
<slot name="testdata" :value1="d1"> 这就是默认值1</slot>
<slot :value2="d2"> 这就是默认值2 </slot>
<p>this is end</p>
</div>
effect.png
铛铛铛～完结撒花，如有不对欢迎指正。觉得有帮助的话记得点个赞哦
