一、匿名插槽
1.适用场景
子组件中只有一个位置允许父组件自定义内容
2.使用方法
第一步：在子组件中定义slot插槽
<template>
<div>
<header>头部</header>
<slot></slot>
<footer>尾部</footer>
</div>
</template>
第二步：在父组件中的子组件标签内直接填写需要插入的内容
<template>
<div>
<TestComOne>
<p>插入的新内容</p>
</TestComOne>
</div>
</template>
最终在子组件渲染出来的结果：
<template>
<div>
<header>头部</header>
<p>插入的新内容</p>
<footer>尾部</footer>
</div>
</template>
当父组件中没有提供插槽内容时，我们也可以给子组件的插槽中添加默认内容
<template>
<div>
<header>头部</header>
<slot>默认内容</slot>
<footer>尾部</footer>
</div>
</template>
最终在子组件渲染出来的结果：
<template>
<div>
<header>头部</header>
默认内容
<footer>尾部</footer>
</div>
</template>
二、具名插槽
1.适用场景
子组件中有多个位置允许父组件自定义内容
2.使用方法
第一步：在子组件中定义多个slot插槽，并且为每个插槽添加一个特殊的attribute name
<template>
<div>
<slot name="slotTop"></slot>
<header>头部</header>
<slot name="slotContent"></slot>
<footer>尾部</footer>
<slot name="slotBottom"></slot>
</div>
</template>
第二步：在父组件中使用对应的插槽名
<template>
<div>
<TestComOne>
<template #slotTop>头部上面</template>
<template #slotContent>中间</template>
<template #slotBottom>尾部下面</template>
</TestComOne>
</div>
</template>
三、作用域插槽
1.为什么要使用作用域插槽
在某些场景下，我们想要插槽的内容使用到子组件域内的数据，这时候就需要用到插槽
2.使用方法
第一步：在子组件中，可以像组件传递props那样，向一个插槽slot传递attributes
<template>
<div>
<slot name="slotTop"></slot>
<header>头部</header>
<slot name="slotContent" height="180" :list="list"></slot>
<footer>尾部</footer>
<slot name="slotBottom"></slot>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const list = ref({ name: "张三", old: 18 });
</script>
第二步：在父组件中使用解构赋值，拿到对应的值
<template>
<div>
<TestComOne>
<template #slotContent="{ height, list }">
<p>身高：{{ height }}</p>
<p>姓名：{{ list.name }}</p>
<p>年龄：{{ list.old }}</p>
</template>
</TestComOne>
</div>
</template>
<script setup lang="ts">
import TestComOne from "./components/index.vue";
</script>
