将代码片段作为属性传递
将代码片段值作为属性接收，构建高度灵活的组件 API
将代码片段作为属性传递 是 CoddyKit 上的免费 Sveltejs Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Sveltejs Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Sveltejs Academy 课程共包含 4 节课。
作为属性的代码片段
代码片段可以像其他值一样传递给子组件。
定义并传递
在父组件中直接定义，并通过名称引用。
{#snippet item(thing)}<li>{thing.name}</li>{/snippet}
<List itemSnippet={item} items={data} />在子组件中接收
将代码片段声明为带类型的属性。
let { itemSnippet, items } = $props();
{#each items as thing}
{@render itemSnippet(thing)}
{/each}渲染属性模式
这是对 React 风格渲染属性的泛化。父组件控制子组件的渲染方式。
自定义
不同的父组件可以提供不同的代码片段，从而完全自定义布局。
带类型的代码片段属性
使用 TypeScript 为代码片段参数添加类型，这样子组件就能获得自动补全。
let { itemSnippet }: { itemSnippet: Snippet<[Thing]> } = $props();可选代码片段
代码片段属性可以是可选的；仅在提供时渲染。
{#if itemSnippet}
{@render itemSnippet(thing)}
{/if}子内容代码片段
默认代码片段会作为 children 暴露在 $props() 中。
let { children } = $props();
{@render children()}组合能力
代码片段属性是无头且可组合的用户界面库的基础。
导入 TypeScript 类型
从 svelte 导入 Snippet 类型，以正确进行类型标注。
import type { Snippet } from "svelte";与插槽相比
代码片段属性比插槽更灵活：它们接受参数，并且可以有条件地渲染。
快速检查
如何将代码片段作为属性接收？
回顾
将代码片段作为属性传递可以反转控制权：父组件提供渲染逻辑，子组件通过 @render 调用它。
常见问题解答
「将代码片段作为属性传递」课时是免费的吗？
是的 — 「将代码片段作为属性传递」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Sveltejs Academy 课程的其余内容，请升级到 CoddyKit PRO。 Sveltejs Academy 课程共包含 4 节课。
「将代码片段作为属性传递」这节课中我会学到什么？
将代码片段值作为属性接收，构建高度灵活的组件 API 你通过在浏览器中直接运行的动手代码来练习 Sveltejs Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Sveltejs Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Sveltejs Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「将代码片段作为属性传递」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Sveltejs Academy 课中编写并运行代码吗？
能。每节 Sveltejs Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。