插槽的概念
你可以把插槽想象成是预留给父组件填充内容的占位符。这样一来，父组件就可以根据需要插入 HTML 结构或者其他组件了。
插槽分为：匿名插槽、具名插槽、作用域插槽
匿名插槽
当子组件中有多个插槽时，父组件传入的内容会填充到子组件中的第一个插槽中。
子组件：
<template>
<div>
我是子组件
<slot></slot>
</div>
</template> 父组件：
<script setup lang="ts">
import HomeView from "./views/HomeView.vue";
</script>
<template>
<HomeView>
<div>我是插槽的内容</div>
</HomeView>
</template>具名插槽
在子组件中定义一个带有 name 属性的 slot 标签，父组件可以通过 slot 属性将内容插入到指定的插槽中。
子组件：
<template>
<div>
我是子组件
<slot name="content"></slot>
</div>
</template> 父组件：
<script setup lang="ts">
import HomeView from "./views/HomeView.vue";
</script>
<template>
<HomeView>
<template v-slot:content>
<div>我是插槽content的内容</div>
</template>
</HomeView>
</template>上面的 v-slot:content 可以简写为：#content
<script setup lang="ts">
import HomeView from "./views/HomeView.vue";
</script>
<template>
<HomeView>
<template #content>
<div>我是插槽content的内容</div>
</template>
</HomeView>
</template>作用域插槽
子组件可以在插槽中传递数据给父组件，父组件可以通过 v-slot 指令接收这些数据，并根据需要进行处理。
子组件：
<script setup lang="ts">
import { ref } from "vue";
const m=ref({a:1})
</script>
<template>
<div>
我是子组件
<!-- 匿名作用域插槽 -->
<slot :data1="m"></slot>
<!-- 具名作用域插槽 -->
<slot name="content" :data2="m"></slot>
</div>
</template>
父组件：
<script setup lang="ts">
import HomeView from "./views/HomeView.vue";
</script>
<template>
<HomeView>
<template v-slot="{data1}">
<div>{{data1}}</div>
</template>
<template v-slot:content="{data2}">
<div>{{ data2 }}</div>
</template>
</HomeView>
</template>上面的具名作用域插槽 v-slot:content="{data2} 也可以简写为：#content="{data2}
动态插槽
对于具名插槽和具名作用域插槽，我们可以定义一个变量，给这个变量赋不同的插槽的名字，这样就可以动态显示对应名字的插槽。
子组件：
<template>
<div>
我是子组件
<slot name="top"></slot>
<slot name="middle"></slot>
</div>
</template>父组件：
<script setup lang="ts">
import { ref } from "vue";
import HomeView from "./views/HomeView.vue";
const slotName=ref('top')
// 改变slotName的值，将其值设置为slot的对应名字，可以动态切换插槽显示
const changeSlotName=()=>{
slotName.value="middle"
}
</script>
<template>
<HomeView>
<template #[slotName]>
<div>我是{{slotName}}插槽的内容</div>
<button @click="changeSlotName">按钮</button>
</template>
</HomeView>
</template>
