0Pricing
Sveltejs Academy · 课时

插槽备用内容

当父组件未提供内容时,在 中渲染默认内容。

插槽备用内容 是 CoddyKit 上的免费 Sveltejs Academy 课时。 这是第 3 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Sveltejs Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 Sveltejs Academy 课程共包含 4 节课。

插槽内部的默认内容

当父组件没有提供内容时,放在 <slot> 标签内的内容会显示出来。

<button>
  <slot>Click me</slot>
</button>

合适的默认内容

请提供无需父组件参与、在大多数情况下都能正常工作的合理默认内容。

具名插槽的回退内容

具名插槽同样支持回退内容。

<slot name="title">Default Title</slot>

按插槽设置策略

您可以为每个插槽设置不同的回退策略,并根据需要灵活组合。

填充后替换

如果父组件提供了内容,回退内容就会被完全替换。

适用于无头组件

无头 UI 组件通常只提供极少的回退内容,让使用者完全自定义。

避免复杂的回退内容

请保持默认内容精简。较大的回退内容会增加未使用组件的体积。

图标和标签

这常用于图标按钮:如果没有提供图标,回退内容会显示通用图标。

与条件结合

回退内容与 $$slots 检查结合使用,可以实现更高级的模式。

不允许使用标记?

回退内容可以包含任意标记,包括其他组件。

视觉测试

请始终在不提供任何插槽内容的情况下预览组件,以查看回退内容。

快速检查

插槽回退内容何时显示?

回顾

将默认内容放在 <slot> 标签之间,以便在父组件省略内容时提供回退内容。

常见问题解答

「插槽备用内容」课时是免费的吗?

是的 — 「插槽备用内容」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 Sveltejs Academy 课程的其余内容,请升级到 CoddyKit PRO。 Sveltejs Academy 课程共包含 4 节课。

「插槽备用内容」这节课中我会学到什么?

当父组件未提供内容时,在 中渲染默认内容。 你通过在浏览器中直接运行的动手代码来练习 Sveltejs Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Sveltejs Academy 需要有经验吗?

无需任何先前经验。CoddyKit 上的 Sveltejs Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 3 节课,共 4 节。

「插槽备用内容」课时需要多长时间?

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。

我能在这节 Sveltejs Academy 课中编写并运行代码吗?

能。每节 Sveltejs Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 用于内容投影的默认插槽
  2. 使用 slot="name" 的具名插槽
  3. 插槽备用内容
  4. 使用 $$slots 检查插槽内容
← 返回 Sveltejs Academy