Svelte 3: Utilizando props

Aplicativos web aprimorados ciberneticamente

props, populares em outros frameworks, como React e Vue.js, são uma maneira muito eficiente de permitir a comunicação de componentes. props funcionam em Svelte da maneira que você espera. Eles são passados ​​de cima para baixo de componentes pai para filhos e são usados ​​para especificar dados que o componente pode consumir para informar o que é processado no DOM.

Vamos demonstrar como usar props construindo um componente simples, chamado Card:

Como você pode ver, você informa ao Svelte sobre as props que um componente aceita usando a sintaxe de export do ES6. Você pode então fazer uso das props dentro do componente com simples interpolação de valores.

Ao utilizar o componente, você pode fornecer as props como:

Com a nossa configuração atual, todas as props são obrigatórias e se não passarmos nenhum valor, Svelte irá reclamar com um aviso no console:

Teremos o aviso:

Para corrigir isso, podemos fornecer um valor padrão para qualquer prop declarada, usando algo como:

E agora você pode usar o componente Card sem passar uma description ou imageUrl e o componente utilizará os valores padrão:

Semelhante a como você pode espalhar props no JSX, o Svelte permite que você espalhe as props a partir de um objeto em seu código, para evitar digitação adicional.

Aqui está um exemplo onde espalhamos as props e comparamos com a digitação em um longo componente de formulário:

Perceba como não importa que, quando espalhamos as props de nossos objetos em items uma propriedade extra (id) também é passada. O componente Card não declara o uso do id como prop, por isso, ela é ignorada.

Como você pode ver no exemplo acima, eu também estou fazendo uso de blocos de lógica #each dentro da minha marcação. Eu cobrirei o que o Svelte disponibiliza para lógica em componentes em um post futuro, mas você também pode ler tudo sobre isso no tutorial oficial do Svelte.

Créditos ⭐️

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store