vue3 学习笔记12 – 插槽的使用
插槽（Slots）是一种让父组件能够向子组件传递标记的方法。通过定义插槽，子组件可以预留出可由父组件控制的区域，这样父组件就可以向这些区域填充自己的内容。
假设我们有一个父组件 ParentComponent 和一个子组件 ChildComponent
默认插槽（Default Slot）
默认插槽是最基本的插槽形式，允许父组件在子组件中插入任意内容，而子组件则可以通过 来渲染这些内容。
- ParentComponent.vue
<template><div><h2>Parent Component</h2><ChildComponent><!-- 这里是默认插槽 --><p>Content inside parent component</p></ChildComponent></div>
</template><script setup lang="ts">
import ChildComponent from './ChildComponent.vue';
</script>- ChildComponent.vue
<template><div><h3>Child Component</h3><slot></slot></div>
</template><script setup lang="ts">
// TypeScript setup syntax
</script>- 上述例子
- ParentComponent 包含了 ChildComponent，并传递了一些内容作为默认插槽。
- ChildComponent 中使用了 来显示来自父组件的内容。
具名插槽（Named Slots）
具名插槽允许父组件在子组件中定义多个插槽位置，使得父组件可以将不同的内容分发到不同的插槽中。这种方式特别适合需要布局或者结构化控制的场景。
- ParentComponent.vue
<template><div><h2>Parent Component</h2><ChildComponent><!-- 具名插槽 --><template #header><h3>Header in Parent</h3></template><template #footer><p>Footer in Parent</p></template></ChildComponent></div>
</template><script setup lang="ts">
import ChildComponent from './ChildComponent.vue';
</script>- ChildComponent.vue
<template><div><h3>Child Component</h3><slot name="header"></slot><slot name="footer"></slot></div>
</template><script setup lang="ts">
// TypeScript setup syntax
</script>- 上述例子
- ParentComponent 通过使用 <template #header> 和 <template #footer> 来定义具名插槽的内容
- ChildComponent 中使用了 和 来渲染具名插槽的内容。
作用域插槽
子组件向父组件传递数据的一种形式，子组件在具名标签或者匿名标签上绑定数据，父组件在标签上获取数据
- ParentComponent.vue
<template><div><ChildComponent v-slot="{ text,count }"><div>{{ text }}---{{ count }}</div></ChildComponent></div>
</template><script setup lang="ts">
import ChildComponent from './ChildComponent.vue';const message = 'Hello from Parent';
</script>- ChildComponent.vue
<template><div><p>我是子组件</p><slot text="我是子组件" :count="1"></slot></div>
</template>
