0Pricing
Sveltejs Academy · 课时

{#snippet} 与 {@render}

使用代码片段定义可复用的模板片段，并在任意位置渲染它们

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

代码片段

代码片段是 Svelte 5 中可复用的模板片段，类似于渲染函数或命名插槽。

定义代码片段

使用 {#snippet name(args)}...{/snippet}。

{#snippet greeting(name)}
  <p>Hello, {name}!</p>
{/snippet}

渲染代码片段

使用 {@render name(args)} 调用它。

{@render greeting("Ada")}

代码片段参数

代码片段像函数一样接受参数；渲染时会传入这些参数。

可复用性

定义一次，即可使用不同参数渲染多次。

{@render greeting("Ada")}
{@render greeting("Bea")}

替代重复内容

代码片段可以减少标记内容较多的组件中的重复代码。

在组件中定义

代码片段位于组件的标记内容中，而不是 JS 中。

作用域

代码片段可以引用其所在组件作用域中的变量。

作为属性传递

代码片段可以作为属性传递给其他组件，从而实现灵活的组合。

插槽的替代方案

代码片段对插槽进行了泛化：更加灵活、可组合，并且支持类型。

TypeScript

代码片段的类型会根据其参数和返回类型推断出来。

快速检查

如何渲染代码片段？

回顾

代码片段是带参数的模板片段。使用 {#snippet} 定义，使用 {@render} 调用。

常见问题解答

「{#snippet} 与 {@render}」课时是免费的吗？

是的 — 「{#snippet} 与 {@render}」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Sveltejs Academy 课程的其余内容，请升级到 CoddyKit PRO。 Sveltejs Academy 课程共包含 4 节课。

「{#snippet} 与 {@render}」这节课中我会学到什么？

使用代码片段定义可复用的模板片段，并在任意位置渲染它们 你通过在浏览器中直接运行的动手代码来练习 Sveltejs Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Sveltejs Academy 需要有经验吗？

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

「{#snippet} 与 {@render}」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. 用于类型化属性的 $props()
  2. {#snippet} 与 {@render}
  3. 将代码片段作为属性传递
  4. 默认代码片段与命名代码片段
← 返回 Sveltejs Academy