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:

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

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:

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

Utilizando spread em props

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

• Using Props with Svelte, escrito originalmente por @alligatorio