使用 slot="name" 的具名插槽
使用具名插槽在组件中定义多个插入点。
使用 slot="name" 的具名插槽 是 CoddyKit 上的免费 Sveltejs Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Sveltejs Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Sveltejs Academy 课程共包含 4 节课。
为何使用具名插槽
组件通常需要多个插入点，例如页眉、主体和页脚。
定义具名插槽
为子组件中的插槽元素添加 name 属性。
<!-- Layout.svelte -->
<header><slot name="header" /></header>
<main><slot /></main>
<footer><slot name="footer" /></footer>填充具名插槽
在父组件中，为元素添加 slot="name" 属性进行标记。
<Layout>
<h1 slot="header">Title</h1>
<p>Body</p>
<p slot="footer">Copyright</p>
</Layout>混合使用默认插槽和具名插槽
没有 slot 属性的内容会填充默认插槽。具名内容会进入相应的具名插槽。
顺序无关
父组件中的顺序并不重要。每个插槽都会按名称匹配。
每个插槽包含多个元素
将多个元素包在一个带有 slot 属性的宿主元素中，就可以把它们全部发送到同一个插槽。
条件页眉
在父组件中使用 {#if}，即可选择性地填充具名插槽。
常见布局
这种模式非常适合包含页眉、侧边栏、主区域和页脚的布局。
表单组件
表单组件可能会为前缀、后缀、帮助文本等定义插槽。
自描述性
插槽名称描述了组件的 API。请选择 title 或 actions 这类具有描述性的名称。
TypeScript 辅助工具
您可以在 TypeScript Svelte 文件中使用特殊的 $$Slots 泛型为插槽添加类型。
快速检查
如何定位具名插槽？
回顾
在子组件中定义多个 <slot name="...">，并在父组件元素上使用 slot="..." 定位它们。
常见问题解答
「使用 slot="name" 的具名插槽」课时是免费的吗？
是的 — 「使用 slot="name" 的具名插槽」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Sveltejs Academy 课程的其余内容，请升级到 CoddyKit PRO。 Sveltejs Academy 课程共包含 4 节课。
「使用 slot="name" 的具名插槽」这节课中我会学到什么？
使用具名插槽在组件中定义多个插入点。 你通过在浏览器中直接运行的动手代码来练习 Sveltejs Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Sveltejs Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Sveltejs Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「使用 slot="name" 的具名插槽」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Sveltejs Academy 课中编写并运行代码吗？
能。每节 Sveltejs Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 用于内容投影的默认插槽
- 使用 slot="name" 的具名插槽
- 插槽备用内容
- 使用 $$slots 检查插槽内容