devterview_$ iniciar simulação

Props no Svelte: `export let` x `$props()` (runes)

FácilJúniorComponentes

Pergunta

Como um componente Svelte recebe props no modelo antigo (`export let`) e no Svelte 5 com runes, e qual a diferença conceitual?

Resposta esperada

Svelte 3/4: `export let titulo;` declara uma prop — o `export` de uma variável de componente significa 'isso vem de fora'. Valor default: `export let cor = 'azul';`. É conciso mas o `export` com esse sentido confunde quem vem de outras linguagens. Svelte 5 (runes): `let { titulo, cor = 'azul' } = $props();` — desestrutura de uma rune explícita, alinhado com como o resto do JS funciona, e deixa claro que são props. Runes também unificam o modelo reativo (`$state`, `$derived`, `$effect`) que antes era mágico (reatividade por atribuição, `$:` labels). Conceitualmente: o Svelte 5 troca convenções implícitas do compilador por primitivas explícitas, ao custo de sintaxe nova pra aprender e migrar.

Por que perguntam isso

Pergunta pleno de Svelte. Sinal de que acompanha: saber que runes são a mudança do Svelte 5 e por quê (explícito > mágico).

#props#runes#export-let#svelte5
publicidade

Relacionadas