Encaminhando propriedades com $$props e $$restProps
Passe todas as propriedades ou as restantes para um elemento ou componente interno.
Encaminhando propriedades com $$props e $$restProps é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 4 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.
Por que encaminhar propriedades
Componentes de encapsulamento frequentemente precisam passar todas as propriedades recebidas para um elemento interno. O encaminhamento evita listar cada atributo.
O objeto $$props
Dentro de um componente, $$props é um objeto que contém todas as propriedades passadas ao componente.
<script>
// $$props is auto-injected
</script>
<input {...$$props} />Incluindo propriedades desconhecidas
Até mesmo as propriedades que o componente não declarou com export let estão presentes em $$props.
O objeto $$restProps
$$restProps exclui as propriedades que você declarou explicitamente com export let. É útil para passar apenas as propriedades adicionais.
<script>
export let label;
</script>
<input {...$$restProps} />Padrão comum
Declare as propriedades importantes para você e encaminhe o restante para o elemento encapsulado.
<script>
export let label;
export let helpText;
</script>
<label>{label}</label>
<input {...$$restProps} />Armadilha: a ordem importa
Expanda primeiro e depois substitua por atributos específicos, se necessário.
<input {...$$restProps} type="email" />Encaminhamento de classes
Encaminhe o atributo class por meio de $$restProps para ter flexibilidade na aplicação de temas.
Encaminhamento de estilos
O atributo style e todos os atributos data-* também são encaminhados naturalmente.
Manipuladores de eventos
Os ouvintes de eventos passados pelo componente pai ficam em $$props como funções. A expansão também os encaminha.
Restrições de reatividade
$$props e $$restProps são um pouco menos eficientes que as propriedades declaradas porque o Svelte não consegue rastreá-los estaticamente.
Ressalva sobre TypeScript
Por padrão, os dois objetos têm tipagem flexível. Faça uma conversão ou amplie os tipos deles em TS para obter encaminhamento com segurança de tipos.
Verificação rápida
O que é $$restProps?
Recapitulação
Encaminhe propriedades com $$props (todas) ou $$restProps (apenas as adicionais), usando expansão no elemento interno.
Perguntas Frequentes
A aula “Encaminhando propriedades com $$props e $$restProps” é grátis?
Sim — o texto completo de “Encaminhando propriedades com $$props e $$restProps” é 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 “Encaminhando propriedades com $$props e $$restProps”?
Passe todas as propriedades ou as restantes para um elemento ou componente interno. 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 4 de 4.
Quanto tempo leva a aula “Encaminhando propriedades com $$props e $$restProps”?
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