Passando snippets como propriedades
Aceite valores de snippets como propriedades para criar APIs de componentes altamente flexíveis.
Passando snippets como propriedades é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 3 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.
Fragmento como propriedade
Os fragmentos podem ser transmitidos para componentes filhos como qualquer outro valor.
Definir e transmitir
Defina o fragmento em linha no componente pai e faça referência a ele pelo nome.
{#snippet item(thing)}<li>{thing.name}</li>{/snippet}
<List itemSnippet={item} items={data} />Receber no componente filho
Declare o fragmento como uma propriedade tipada.
let { itemSnippet, items } = $props();
{#each items as thing}
{@render itemSnippet(thing)}
{/each}Padrão de propriedades de renderização
Isso generaliza a propriedade de renderização no estilo do React. Os pais controlam como os filhos são renderizados.
Personalização
Pais diferentes podem fornecer fragmentos diferentes, personalizando completamente o layout.
Propriedades de fragmentos tipadas
Com TypeScript, tipifique o parâmetro do fragmento para que os componentes filhos tenham preenchimento automático.
let { itemSnippet }: { itemSnippet: Snippet<[Thing]> } = $props();Fragmentos opcionais
As propriedades de fragmentos podem ser opcionais; renderize o fragmento apenas quando ele for fornecido.
{#if itemSnippet}
{@render itemSnippet(thing)}
{/if}Fragmento children
O fragmento padrão é exposto como children em $props().
let { children } = $props();
{@render children()}Potencial de composição
As propriedades de fragmentos são a base para bibliotecas de interfaces sem apresentação visual e componíveis.
Importação do TypeScript
Importe o tipo Snippet de svelte para obter a tipagem correta.
import type { Snippet } from "svelte";Comparação com slots
As propriedades de fragmentos são mais flexíveis que os slots: aceitam parâmetros e podem ser renderizadas condicionalmente.
Verificação rápida
Como receber um fragmento como propriedade?
Recapitulação
Transmita fragmentos como propriedades para inverter o controle: os pais fornecem a lógica de renderização, e os filhos a invocam por meio de @render.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 41
- Aulas
- 163
Perguntas Frequentes
A aula “Passando snippets como propriedades” é grátis?
Sim — o texto completo de “Passando snippets como propriedades” é 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 “Passando snippets como propriedades”?
Aceite valores de snippets como propriedades para criar APIs de componentes altamente flexíveis. 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 3 de 4.
Quanto tempo leva a aula “Passando snippets como propriedades”?
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