{#snippet} e {@render}
Defina fragmentos de modelo reutilizáveis com snippets e renderize-os em qualquer lugar.
{#snippet} e {@render} é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
Fragmentos
Fragmentos são partes reutilizáveis de modelos no Svelte 5, semelhantes a funções de renderização ou slots nomeados.
Definir um fragmento
Use {#snippet name(args)}...{/snippet}.
{#snippet greeting(name)}
<p>Hello, {name}!</p>
{/snippet}Renderizar um fragmento
Use {@render name(args)} para invocá-lo.
{@render greeting("Ada")}Parâmetros de fragmentos
Os fragmentos aceitam argumentos como funções; a renderização os transmite.
Reutilização
Defina uma vez e renderize muitas vezes com argumentos diferentes.
{@render greeting("Ada")}
{@render greeting("Bea")}Substituir repetições
Os fragmentos reduzem a duplicação em componentes com muita marcação.
Definidos em componentes
Os fragmentos ficam dentro da marcação de um componente, não em JS.
Escopo
Os fragmentos podem fazer referência a variáveis no escopo do componente que os envolve.
Transmitir como propriedades
Os fragmentos podem ser transmitidos como propriedades para outros componentes, permitindo uma composição flexível.
Substituição dos slots
Os fragmentos generalizam os slots: são mais flexíveis, componíveis e tipados.
TypeScript
Os tipos dos fragmentos são inferidos a partir de seus parâmetros e tipos de retorno.
Verificação rápida
Como renderizar um fragmento?
Recapitulação
Fragmentos são partes parametrizadas de modelos. Defina-os com {#snippet} e invoque-os com {@render}.
Perguntas Frequentes
A aula “{#snippet} e {@render}” é grátis?
Sim — o texto completo de “{#snippet} e {@render}” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “{#snippet} e {@render}”?
Defina fragmentos de modelo reutilizáveis com snippets e renderize-os em qualquer lugar. Você pratica Sveltejs Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “{#snippet} e {@render}”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Sveltejs Academy?
Sim. Cada aula de Sveltejs Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- $props() para propriedades tipadas
- {#snippet} e {@render}
- Passando snippets como propriedades
- Snippets padrão e nomeados