slot 插槽，可以理解为slot在组件模板中提前占据了位置。当复用组件时，使用相关的slot标签时，标签里的内容就会自动替换组件模板中对应slot标签的位置，作为承载分发内容的出口。

主要作用是复用和扩展组件，做一些定制化组件的处理。

插槽主要有3种

默认插槽

// 子组件
<template>
<slot>
  <div>默认插槽备选内容</div>
</slot>
</template>
// 父组件
<template>
<Child>
  <div>替换默认插槽内容</div>
</Child>
</template>

具名插槽

slot 标签没有name属性，则为默认插槽。具备name属性，则为具名插槽

// 子组件
<template>
  <slot>默认插槽的位置</slot>
  <slot name="content">插槽content内容</slot>
</template>
// 父组件
<template>
   <Child>
     <template v-slot:default>
       默认...
     </template>
     <template v-slot:content>
       内容...
     </template>
   </Child>
</template>

作用域插槽

子组件在作用域上绑定的属性来将组件的信息传给父组件使用，这些属性会被挂在父组件接受的对象上。

// 子组件
<template>
<slot name="footer" childProps="子组件">
  作用域插槽内容
</slot>
</template>
// 父组件
<template>
<Child v-slot="slotProps">
  {{ slotProps.childProps }}
</Child>
</template>