Svelte 最新中文文档翻译（7）—— snippet 与 @render

前言

Svelte，一个非常“有趣”、用起来“很爽”的前端框架。从 Svelte 诞生之初，就备受开发者的喜爱，根据统计，从 2019 年到 2024 年，连续 6 年一直是开发者最感兴趣的前端框架 No.1：

Svelte 以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级 Web 项目，也是我做个人项目的首选技术栈。
目前 Svelte 基于 Svelte 5 发布了最新的官方文档，但却缺少对应的中文文档。为了帮助大家学习 Svelte，为爱发电翻译了官方文档。
我同时搭建了 Svelte 最新的中文文档站点：https://svelte.yayujs.com ，如果需要辅助学习，也可以入手我的小册《Svelte 开发指南》，语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！
虽说是翻译，但个人并不喜欢严格遵守原文，为了保证中文阅读流畅，会删减部分语句，对难懂的部分也会另做补充解释，希望能给大家带来一个好的中文学习体验。
欢迎围观我的“朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。
snippet

1. {#snippet name()}...{/snippet}

复制代码

1. {#snippet name(param1, param2, paramN)}...{/snippet}

复制代码

代码片段和 渲染标签 是在组件内部创建可复用标记块的一种方法。与其编写这样的重复代码...

1. {#each images as image}
2.     {#if image.href}
3.         
4.             <figure>
5.                 <img src={image.src} alt={image.caption} width={image.width} height={image.height} />
6.                 <figcaption>{image.caption}</figcaption>
7.             </figure>
8.         
9.     {:else}
10.         <figure>
11.             <img src={image.src} alt={image.caption} width={image.width} height={image.height} />
12.             <figcaption>{image.caption}</figcaption>
13.         </figure>
14.     {/if}
15. {/each}

复制代码

...你可以这样写:

1. {#snippet figure(image)}
2.     <figure>
3.         <img src={image.src} alt={image.caption} width={image.width} height={image.height} />
4.         <figcaption>{image.caption}</figcaption>
5.     </figure>
6. {/snippet}
8. {#each images as image}
9.     {#if image.href}
10.         
11.                 {@render figure(image)}
12.         
13.     {:else}
14.         {@render figure(image)}
15.     {/if}
16. {/each}

复制代码

像函数声明一样，代码片段可以有任意数量的参数，这些参数可以有默认值，并且你可以对每个参数进行解构。然而，你不能使用剩余参数。
代码片段作用域


代码片段可以在组件的任何地方声明。它们可以引用在自身之外声明的值，例如在 {#snippet hello(name)}        你好 {name}! {message}!
{/snippet}{@render hello('alice')}{@render hello('bob')}[/code]...并且它们对同一词法作用域中的所有内容都是"可见的"（即兄弟节点和这些兄弟节点的子节点）：

1.     {#snippet x()}
2.         {#snippet y()}...{/snippet}
4.         
5.         {@render y()}
6.     {/snippet}
8.    
9.     {@render y()}
13. {@render x()}

复制代码

代码片段可以引用自身和其他片段 (demo)：
[code]{#snippet blastoff()}   
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！