插槽备用内容
当父组件未提供内容时,在 中渲染默认内容。
插槽备用内容 是 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 反馈 — 无需本地设置。