Valores padrão das propriedades
Atribua valores de fallback às propriedades quando o componente pai não os fornecer.
Valores padrão das 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.
Por que usar valores padrão
Os valores padrão tornam um componente utilizável sem que cada consumidor precise passar todas as propriedades. Eles definem o comportamento de reserva.
Valor padrão em linha
Atribua um valor ao declarar a propriedade.
export let label = "Click me";Valores padrão de função
Os valores padrão podem ser expressões ou literais de função.
export let onClick = () => {};Valores padrão de objeto
Use um literal de objeto para valores padrão complexos.
export let options = { color: "blue", size: "md" };Cuidado com a referência compartilhada
Os literais de objeto padrão são avaliados por instância, portanto cada componente recebe seu próprio objeto. É seguro alterá-lo.
Substituição no componente pai
Quando o componente pai fornece um valor, ele substitui o valor padrão daquela instância.
<Button label="Save" />Detecção de obrigatoriedade
Sem um valor padrão, a propriedade é conceitualmente obrigatória. O TypeScript pode impor isso com a indicação required.
null e undefined
Passar undefined como valor faz com que o valor padrão seja aplicado; passar null não o aplica.
Composição de valores padrão
Componha valores padrão a partir de outras propriedades usando declarações reativas.
export let title = "";
export let subtitle;
$: effectiveSubtitle = subtitle ?? title;Documentação
Documente os valores padrão nos comentários JSDoc para ajudar as dicas de ferramentas do IDE a exibi-los.
/** @param {string} label */Valores padrão estáveis
Evite valores padrão que mudem entre renderizações. Valores padrão estáveis reduzem novas renderizações e comportamentos inesperados.
Verificação rápida
Como você define o valor padrão de uma propriedade?
Recapitulação
Forneça valores padrão com uma atribuição simples. Eles tornam os componentes autossuficientes e deixam claro quais propriedades são opcionais.
Perguntas Frequentes
A aula “Valores padrão das propriedades” é grátis?
Sim — o texto completo de “Valores padrão das 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 “Valores padrão das propriedades”?
Atribua valores de fallback às propriedades quando o componente pai não os fornecer. 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 “Valores padrão das 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
- Declarando propriedades com export let
- Passando propriedades do componente pai
- Valores padrão das propriedades
- Encaminhando propriedades com $$props e $$restProps