Passando propriedades do componente pai
Forneça valores às propriedades dos componentes filhos no modelo do componente pai.
Passando propriedades do componente pai é 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.
Importar o componente filho
Use um import ES padrão no início do componente pai para importar o componente filho.
<script>
import Greeting from "./Greeting.svelte";
</script>Usar a tag
Renderize o componente filho escrevendo uma tag com seu nome iniciado por letra maiúscula.
<Greeting />Passar valores estáticos
Passe uma string literal usando atributos entre aspas.
<Greeting name="Ada" />Passar valores dinâmicos
Passe uma expressão JS envolvendo o valor entre chaves.
<Greeting name={userName} />Atalho para o mesmo nome
Se a propriedade e a variável tiverem o mesmo nome, use o atalho {name}.
<Greeting {name} />Várias propriedades
Combine propriedades estáticas, dinâmicas e abreviadas em qualquer ordem.
<Card title="Tasks" {items} count={items.length} />Expansão de propriedades
Expanda um objeto de propriedades usando a sintaxe {...obj}.
<Card {...cardProps} />Propriedades condicionais
Combine operadores ternários para fornecer valores condicionais.
<Button label={isLoading ? "Saving..." : "Save"} />Atalho para booleanos
Passe um atributo booleano sem valor para defini-lo como true.
<Toggle disabled />Funções como propriedades
Você pode passar referências de funções como propriedades para usá-las como funções de retorno.
<Modal onClose={() => (open = false)} />Objetos como propriedades
Passe objetos inteiros quando muitos valores relacionados precisarem ser enviados juntos.
<UserCard user={currentUser} />Verificação rápida
Como você passa uma variável como propriedade?
Recapitulação
Importe, use a tag e passe propriedades com literais, expressões, atalhos ou expansão.
Perguntas Frequentes
A aula “Passando propriedades do componente pai” é grátis?
Sim — o texto completo de “Passando propriedades do componente pai” é 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 propriedades do componente pai”?
Forneça valores às propriedades dos componentes filhos no modelo do componente pai. 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 “Passando propriedades do componente pai”?
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
- Declarando propriedades com export let
- Passando propriedades do componente pai
- Valores padrão das propriedades
- Encaminhando propriedades com $$props e $$restProps