Svelte 3: Utilizando props
Tags: ptbr, javascript, webdev, svelte
Published: 2019-07-07 06:04:11

## 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`:

```vue
<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:

```vue
<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!" />
```

## Valores padrão para props opcionais

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:

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

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

Teremos o aviso: 

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

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

```vue
<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:

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

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

## Utilizando spread em props

Semelhante a como você pode [espalhar props no JSX](https://alligator.io/react/jsx-introduction/#spreading-props), 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:

```vue
<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.](https://svelte.dev/tutorial/each-blocks)

# Créditos ⭐️

- [Using Props with Svelte](https://alligator.io/svelte/using-props/), escrito originalmente por [@alligatorio](https://mobile.twitter.com/alligatorio)