用于内容投影的默认插槽
在组件中放置 元素，以接收任意子内容。
用于内容投影的默认插槽 是 CoddyKit 上的免费 Sveltejs Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Sveltejs Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Sveltejs Academy 课程共包含 4 节课。
什么是插槽
插槽让父组件可以将标记注入子组件中的特定位置。
slot 元素
在子组件内部，将 <slot /> 标签放在内容应出现的位置。
<!-- Card.svelte -->
<div class="card">
<slot />
</div>从父组件使用
将子元素放在组件标签之间。它们会出现在插槽所在的位置。
<Card>
<p>Hello inside the card!</p>
</Card>组合能力
这种模式可以让您构建卡片、模态框和页面等可复用的布局外壳。
多个子元素
任意数量的元素都可以填充默认插槽。
<Card>
<h1>Title</h1>
<p>Body</p>
</Card>纯字符串
您也可以将纯文本作为插槽内容传入。
<Button>Click me</Button>条件内容
在父组件中使用 {#if} 来选择要插入的内容。
组件插槽
插槽内容可以自由包含其他组件。
<Card>
<Avatar />
<Username />
</Card>样式
插槽内容保留编写它的父组件的样式，而不是子组件的样式。
布局与逻辑
插槽是布局和组合工具，而不是传递数据的机制。请使用属性传递数据。
插槽出口
一个组件可以有多个插槽位置（默认插槽加具名插槽）。
快速检查
插槽内容会出现在哪里？
回顾
在子组件中使用 <slot />，并在父组件标签之间传入子元素，即可注入内容。
常见问题解答
「用于内容投影的默认插槽」课时是免费的吗？
是的 — 「用于内容投影的默认插槽」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Sveltejs Academy 课程的其余内容，请升级到 CoddyKit PRO。 Sveltejs Academy 课程共包含 4 节课。
「用于内容投影的默认插槽」这节课中我会学到什么？
在组件中放置 元素，以接收任意子内容。 你通过在浏览器中直接运行的动手代码来练习 Sveltejs Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Sveltejs Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Sveltejs Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「用于内容投影的默认插槽」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Sveltejs Academy 课中编写并运行代码吗？
能。每节 Sveltejs Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 用于内容投影的默认插槽
- 使用 slot="name" 的具名插槽
- 插槽备用内容
- 使用 $$slots 检查插槽内容