插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。
匿名插槽
在子组件放置一个插槽
<template><div><slot></slot></div>
</template><script setup lang="ts"></script>父组件中使用：
<Son><template v-slot><div>哈哈哈哈哈哈</div></template></Son>具名插槽
具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中
子组件代码：
<template><div><slot name="top"></slot><slot></slot><slot name="bottom"></slot></div>
</template><script setup lang="ts"></script>父组件中使用：
<Son><template v-slot:top><div>我是头部</div></template><template v-slot><div>哈哈哈哈哈哈</div></template><template v-slot:bottom><div>我是尾部</div></template></Son>动态插槽
插槽可以是一个变量名
<Son><template #[name]><div>我是动态的</div></template></Son>const name = ref('top')
