本节主要介绍一下 v-slot 插槽指令，以及插槽相关内容

1、定义：

子组件给父组件提供使用的一个位置，使用<slot></slot>表示，父组件可以在这个位置填充任何代码；

2、默认插槽

匿名插槽：会自定渲染一个 #default插槽，将没有声明的名称的内容，放入default中

<template>
<!-- 子组件 --><div class="child"><h2>子组件</h2><slot>默认内容</slot> // 内容会渲染到slot中</div>
</template>

<!-- 父组件 -->
<template><div class="par"><h3>父组件</h3><Child>匿名插槽，内容将会渲染到子组件的slot中</Child> // 此处无内容时，会渲染子组件中的默认内容；</div>
</template>

如图：

可以看到父组件下的 Child中的内容会自动渲染到 子组件中的slot中；
如果父组件中的Child中没有内容，则会自动渲染子组件中 slot 中的默认内容；如果父组件中的Child中有内容，则会替代子组件 slot 中的默认内容；

3、具名插槽

具名插槽就是为要渲染的内容指定一个位置，让其待着指定的位置；父组件会根据具名插槽的(slot="header" 或者 #header)会渲染到子组件中相同名称的插槽中；
具名插槽可以有多个不同名称的插槽，而匿名插槽只能有一个，同时，在父组件中没有声明的插槽内容都会渲染到子组件的匿名插槽中；

<template>
<div class="par"><h3>父组件</h3><!-- <Child ><template #:header>父组件渲染的具名插槽</template></Child> --><Child ><template v-slot:header>父组件渲染的具名插槽</template></Child> // #header表示具名插槽的名字 简写方式</div>
</template>
<script setup>
import Child from './components/childSlot.vue'
</script>

<template><!-- 子组件 --><div class="child"><h2>具名插槽</h2><slot name="header"></slot></div></template>

4、动态插槽

动态插槽名就是插槽名变成了变量的形式，我们可以随时修改这个变量从而展示不同的效果。它的写法是v-slot:[变量名]或者缩写为#[变量名]。

  <template><div class="par"><h3>父组件</h3><Child ><template v-slot:[slotName]>动态插槽</template></Child> </div></template><script setup>import Child from './components/childSlot.vue'const slotName = ref('foot') // 声明动态插槽名称为 子组件的插槽名渲染到foot插槽名中；</script>

5、作用域插槽

作用域插槽就是父组件进行增删改查操作，向子组件传递数据；同时子组件通过插槽获取数据，同时子组件可以修改数据，然后再通过插槽返回给父组件；

<template><!-- 子组件 --><div class="child"><h2>子组件</h2><h2>作用域插槽</h2><slot text="作用域插槽2222" ></slot><slot text="具名插槽作用域" name="foot2"></slot></div></template>

 <template><div class="par"><h3>父组件</h3><Child v-slot="{text}">{{text}} // 作用域插槽，渲染出来的内容是：“作用域插槽2222”</Child> <Child ><!-- 具名插槽 作用域 --><Child ><template #foot2="foot2Props">{{foot2Props.text}} // 作用域插槽，渲染出来的内容是：“具名插槽作用域”</template></Child> </div></template>