一. 什么是slot?

在Vue中，slot 是一种用于在组件之间进行内容分发的机制。它允许我们在组件的模板中定义具有特定名称的插槽，并在组件的使用者中填充相应的内容。

二. 使用场景

1. 通过插槽可以让用户可以拓展组件，去更好地复用组件和对其做定制化处理

2. 如果父组件在使用到一个复用组件的时候，获取这个组件在不同的地方有少量的更改，如果去重写组件是一件不明智的事情

3. 通过slot插槽向组件内部指定位置传递内容，完成这个复用组件在不同场景的应用

三.分类

1. 默认插槽
就是该插槽没有名字，父组件在使用的时候，直接在子组件的标签里写入内容就行。
子组件 child.vue

<template><div><slot>父组件想展示的内容写在这里边</slot></div>
</template>

父组件 father.vue

<template><div><Child><p>Custom Content</p></Child><Child></Child></div>
</template>
<script>import Child from '../components/child'export default {name:'Father',components:{Child}}
</script>

2. 具名插槽
子组件用name属性来表示插槽的名字，不传为默认插槽
子组件 child.vue

<template><form ><div class="auth"><slot>插槽后备的内容</slot><slot name="content">插槽后备的内容</slot></div></form>
</template>

父组件 father.vue

<child><template v-slot:default></template><template #content></template>
</child>

3. 作用域插槽
子组件 child.vue

<div><!-- 设置默认值：{{person.name}}获取 baijing --><!-- 如果father.vue中给这个插槽值的话，则不显示 baijing --><!-- 设置一个 usertext 然后把person绑到设置的 usertext 上 --><slot v-bind:usertext="person">{{person.name}}</slot>
</div>//定义内容
data(){return{person:{name:"baijing",age: 20}}
}

父组件 father.vue

<div><test v-slot:default="slotProps">{{slotProps.usertext.age}}</test>
</div>

绑定在 元素上的特性被称为插槽 prop。在父组件中，我们可以用 v-slot 设置一个值来定义我们提供的插槽 prop 的名字，然后直接使用就好了