Svelte 3: Utilizando props

Aplicativos web aprimorados ciberneticamente

Image for post
Image for post

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:

<script>
export let title;
export let description;
export let imageUrl;
</script>

<style>
h1 {
color: coral;
}
section {
border-radius: 8px;
box-shadow: 0 0 4px rgba(255, 0, 0, 0.1);
max-width: 600px;
margin: 1rem auto;
padding: 1rem 2rem;
}
img {
width: 32px;
height: 32px;
margin-right: 12px;
vertical-align: middle;
}
</style>

<section>
<h1>
<img src={imageUrl} alt="Avatar for {title}" />
{title}
</h1>

<p>{description}</p>
</section>

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:

<script>
import Card from "./Card.svelte";
</script>

<Card
title="See you later, Alligator"
imageUrl="https://alligator.io/images/alligator-logo3.svg"
description="Not so soon, baboon!" />

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:

<script>
import Card from "./Card.svelte";
</script>

<Card
title="See you later, Alligator"
description="Not so soon, baboon!" />

Teremos o aviso:

<Card> was created without expected prop 'imageUrl'.

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

<script>
export let title;
export let description = "Description coming soon!";
export let imageUrl = "https://picsum.photos/64";
</script>

<style>
/* ... */
</style>

<section>
<h1>
<img src={imageUrl} alt="Avatar for {title}" />
{title}
</h1>

<p>{description}</p>
</section>

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

<script>
import Card from "./Card.svelte";
</script>

<Card
title="Tood-a-loo, Kangaroo!" />

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:

<script>
import Card from "./Card.svelte";

const items = [
{
id: 1
title: "Pirate",
description: "Argg!!",
imageUrl: "https://alligator.io/images/pirate.svg"
},
{
id: 2
title: "Chef",
description: "À la soupe!",
imageUrl: "https://alligator.io/images/chef.svg"
}
];
</script>

<!-- Sem propagação: -->
{#each items as item}
<Card
title={item.title}
description={item.description}
imageUrl={item.imageUrl}
/>
{/each}

<!-- Com propagação: -->
{#each items as item}
<Card {...item} />
{/each}

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 ⭐️

Written by

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