Los Datos Fluyen hacia Abajo

Los componentes reciben datos de sus padres a través de props. En Svelte 5, la runa $props() se encarga de esto. Entender los props es esencial — así es como construyes componentes configurables y reutilizables.

Lo que Aprenderás

Declarar props con $props()
Pasar datos a los componentes
Establecer valores por defecto
Desestructurar múltiples props

La Runa $props

Los props se declaran desestructurando el 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>

El componente espera un prop service. Cuando se usa:

<ServiceCard service={lawnMowing} />

El objeto lawnMowing queda disponible como service dentro del componente.

Pasar Props

Hay varias formas de pasar props:

Prop con nombre:

<ServiceCard service={myService} />

Forma abreviada (cuando el nombre de la variable coincide con el nombre del 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 }} />

Expresión:

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

Múltiples Props

Los componentes pueden aceptar múltiples 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>

Pásalos al usar el componente:

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

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

Los props booleanos pueden pasarse sin un valor — showPrice equivale a showPrice={true}.

Valores por Defecto

Establece valores por defecto para props opcionales:

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

Ahora esto funciona:

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

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

Los props requeridos (sin valor por defecto) generarán una advertencia si no se proporcionan.

Los Props Son de Solo Lectura

Los props fluyen de padre a hijo. No puedes reasignarlos:

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

Si necesitas modificar los datos del prop, crea estado local:

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

Props Reactivos

Los props son automáticamente reactivos. Cuando el padre actualiza los datos, el hijo se vuelve a renderizar:

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

Cuando currentService cambia, ServiceCard se actualiza automáticamente.

Acceder a Todos los Props

A veces necesitas todos los props como un objeto:

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

O combinar la desestructuración con rest:

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

Esto es útil para reenviar props a otros elementos.

Actualizar ServiceCard con Props

Mejoremos el ServiceCard con props adecuados:

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

Ahora úsalo con varias configuraciones:

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

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

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

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

Errores Comunes

Olvidar Desestructurar

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

Intentar 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 Requeridas Faltantes

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

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

Resumen

Las props son la forma en que los datos fluyen hacia los componentes. Usa $props() para declararlas, desestructura para acceder a props individuales, y establece valores por defecto para las opcionales. Las props son reactivas y de solo lectura.

Conclusiones clave:

Declarar con let { prop } = $props()
Establecer valores por defecto: let { prop = defaultValue } = $props()
Las props son de solo lectura — no las reasignes
Las props activan automáticamente re-renderizados cuando cambian

Próximos Pasos

ServiceCard está quedando bien. Continúa con Crear el Componente BookingForm para extraer la lógica del formulario en su propio componente.