Os Dados Fluem para Baixo

Os componentes recebem dados de seus pais por meio de props. No Svelte 5, a rune $props() cuida disso. Entender props é essencial — é assim que você cria componentes configuráveis e reutilizáveis.

O Que Você Vai Aprender

Declarar props com $props()
Passar dados para componentes
Definir valores padrão
Desestruturar múltiplas props

A Rune $props

As props são declaradas desestruturando o resultado de $props():

<!-- filename: src/lib/components/ServiceCard.svelte -->
<script>
  let { service } = $props();
</script>

<article class="service-card">
  <h3>{service.name}</h3>
  <p>{service.description}</p>
  <p>${service.price}</p>
</article>

O componente espera uma prop service. Quando utilizado:

<ServiceCard service={lawnMowing} />

O objeto lawnMowing fica disponível como service dentro do componente.

Passando Props

Existem várias maneiras de passar props:

Prop nomeada:

<ServiceCard service={myService} />

Forma abreviada (quando o nome da variável coincide com o nome da prop):

<script>
  const service = { name: 'Lawn Mowing', price: 50 };
</script>

<!-- Shorthand: {service} equals service={service} -->
<ServiceCard {service} />

Valor literal:

<ServiceCard service={{ name: 'Test', price: 0 }} />

Expressão:

<ServiceCard service={services.find(s => s.slug === 'lawn-mowing')} />

Múltiplas Props

Os componentes podem aceitar múltiplas props:

<!-- filename: src/lib/components/ServiceCard.svelte -->
<script>
  let { service, selected, showPrice } = $props();
</script>

<article class="service-card" class:selected>
  <h3>{service.name}</h3>
  <p>{service.description}</p>
  {#if showPrice}
    <p class="price">${service.price}</p>
  {/if}
</article>

Passe-as ao usar o componente:

<ServiceCard 
  service={lawnMowing} 
  selected={true} 
  showPrice={true} 
/>

<!-- Or with shorthand where applicable -->
<ServiceCard {service} {selected} showPrice />

Props booleanas podem ser passadas sem um valor — showPrice equivale a showPrice={true}.

Valores Padrão

Defina valores padrão para props opcionais:

<script>
  let { 
    service,
    selected = false,
    showPrice = true,
    showDuration = true
  } = $props();
</script>

Agora isso funciona:

<!-- Uses defaults: selected=false, showPrice=true, showDuration=true -->
<ServiceCard {service} />

<!-- Override specific defaults -->
<ServiceCard {service} selected={true} showDuration={false} />

Props obrigatórias (sem valor padrão) causarão um aviso se não forem fornecidas.

Props São Somente Leitura

As props fluem do pai para o filho. Você não pode reatribuí-las:

<script>
  let { service } = $props();
  
  // ❌ This will cause an error
  service = { name: 'New Service' };
</script>

Se precisar modificar os dados de uma prop, crie um estado local:

<script>
  let { service } = $props();
  
  // ✅ Create local state from prop
  let localService = $state({ ...service });
  
  function updateName(newName) {
    localService.name = newName;
  }
</script>

Props Reativas

As props são automaticamente reativas. Quando o pai atualiza os dados, o filho é re-renderizado:

<!-- Parent -->
<script>
  let currentService = $state(services[0]);
  
  function selectNext() {
    const index = services.indexOf(currentService);
    currentService = services[(index + 1) % services.length];
  }
</script>

<ServiceCard service={currentService} />
<button onclick={selectNext}>Next Service</button>

Quando currentService muda, ServiceCard é atualizado automaticamente.

Acessando Todas as Props

Às vezes você precisa de todas as props como um objeto:

<script>
  let props = $props();
  
  // Access individual props
  console.log(props.service);
  console.log(props.selected);
</script>

Ou combine desestruturação com rest:

<script>
  let { service, ...rest } = $props();
  
  // service is extracted
  // rest contains all other props
</script>

Isso é útil para encaminhar props para outros elementos.

Atualize o ServiceCard com Props

Vamos aprimorar o ServiceCard com props adequadas:

<!-- filename: src/lib/components/ServiceCard.svelte -->
<script>
  let { 
    service,
    selected = false,
    showDescription = true,
    showPrice = true,
    showDuration = true
  } = $props();
</script>

<article class="service-card" class:selected>
  <h3>
    <a href="/services/{service.slug}">{service.name}</a>
  </h3>
  
  {#if showDescription && service.description}
    <p class="description">{service.description}</p>
  {/if}
  
  <div class="meta">
    {#if showPrice}
      <span class="price">${service.price}</span>
    {/if}
    {#if showDuration}
      <span class="duration">{service.duration} min</span>
    {/if}
  </div>
</article>

<style>
  .service-card {
    padding: 1rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    background: white;
    transition: all 0.2s;
  }
  
  .service-card:hover {
    border-color: #007bff;
  }
  
  .service-card.selected {
    border-color: #007bff;
    background: #f0f7ff;
  }
  
  .service-card h3 {
    margin: 0 0 0.5rem 0;
  }
  
  .service-card h3 a {
    color: inherit;
    text-decoration: none;
  }
  
  .description {
    color: #666;
    margin: 0 0 0.75rem 0;
  }
  
  .meta {
    display: flex;
    gap: 1rem;
  }
  
  .price {
    font-weight: bold;
    color: #007bff;
  }
  
  .duration {
    color: #666;
    font-size: 0.875rem;
  }
</style>

Agora use-o com várias configurações:

<!-- Full display -->
<ServiceCard {service} />

<!-- Selected state -->
<ServiceCard {service} selected={true} />

<!-- Compact (no description) -->
<ServiceCard {service} showDescription={false} />

<!-- Minimal -->
<ServiceCard {service} showDescription={false} showDuration={false} />

Erros Comuns

Esquecer de Desestruturar

<script>
  // ❌ Props aren't accessible
  $props();
  
  // ✅ Destructure to access
  let { service } = $props();
</script>

Tentar Mutar Props

<script>
  let { items } = $props();
  
  // ❌ Can't push to a prop
  items.push(newItem);
  
  // ✅ Tell parent to update, or use local state
  let localItems = $state([...items]);
  localItems.push(newItem);
</script>

Props Obrigatórias Ausentes

<!-- ❌ service is required but not provided -->
<ServiceCard />

<!-- ✅ Provide required props -->
<ServiceCard {service} />

Resumo

Props são a forma como os dados fluem para os componentes. Use $props() para declará-los, desestruture para acessar props individuais e defina valores padrão para os opcionais. Props são reativos e somente leitura.

Principais pontos:

Declare com let { prop } = $props()
Defina padrões: let { prop = defaultValue } = $props()
Props são somente leitura — não os reatribua
Props acionam re-renderizações automaticamente quando alterados

Próximos Passos

O ServiceCard está ficando ótimo. Continue com Criar o Componente BookingForm para extrair a lógica do formulário para seu próprio componente.