Propagación de Eventos desde el Componente Hijo al Componente Padre

En Svelte 5, la propagación de eventos permite a los componentes hijos comunicar información a los padres de manera directa y reactiva. Una forma eficiente de lograr esto es mediante el uso de enlaces reactivos (bind) para compartir datos entre el hijo y el padre sin la necesidad de despachar eventos explícitamente.

Ejemplo 1: Botón que Actualiza un Mensaje

Aquí, el componente hijo Hijo.svelte actualiza un mensaje y un timestamp que luego se pasan al componente padre Padre.svelte, permitiendo al padre reaccionar a estos cambios en tiempo real.

Componente Hijo (Hijo.svelte)

js 
<script>
export let mensaje = '';
export let timestamp = null;

function handleClick() {
  mensaje = '¡Hola desde el componente hijo!';
  timestamp = new Date();
}
</script>

<button on:click={handleClick}>
Enviar mensaje al padre
</button>

Componente Padre (Padre.svelte)

js 
<script>
import Hijo from './Hijo.svelte';

let mensajeRecibido = '';
let horaRecibido = null;

$: if (mensajeRecibido || horaRecibido) {
  console.log(`Mensaje recibido: ${mensajeRecibido}`);
  console.log(`Hora: ${horaRecibido}`);
}
</script>

<div>
<h1>Componente Padre</h1>
<Hijo 
  bind:mensaje={mensajeRecibido}
  bind:timestamp={horaRecibido}
/>

{#if mensajeRecibido}
  <p>Último mensaje: {mensajeRecibido}</p>
  <p>Recibido a las: {horaRecibido?.toLocaleTimeString()}</p>
{/if}
</div>
  Explicación

  • El hijo modifica las variables enlazadas mensaje y timestamp.
  • El padre actualiza su estado automáticamente gracias a bind.

2: Formulario Reactivo

El formulario en el componente hijo Formulario.svelte se enlaza de manera reactiva con el componente padre App.svelte mediante bind:value. Esto permite que los valores de los inputs sean actualizados en tiempo real entre ambos componentes.

Componente Hijo (Formulario.svelte)

js 
<script>
export let nombre = '';
export let edad = null;
</script>

<form>
<label>Nombre:</label>
<input type="text" bind:value={nombre} />

<label>Edad:</label>
<input type="number" bind:value={edad} />
</form>

Componente Padre (App.svelte)

js 
<script>
import Formulario from './Formulario.svelte';

let nombreUsuario = '';
let edadUsuario = null;
</script>

<div>
<h1>Datos del Usuario</h1>
<Formulario 
  bind:nombre={nombreUsuario} 
  bind:edad={edadUsuario} 
/>

<p>Nombre: {nombreUsuario}</p>
<p>Edad: {edadUsuario}</p>
</div>
  Explicación

  • El hijo usa bind:value en los campos del formulario para sincronizar datos con el padre en tiempo real.

3: Selector de Opciones

Este ejemplo muestra cómo el componente padre App.svelte y el componente hijo Selector.svelte comparten el valor seleccionado de un select mediante la directiva bind:value. Así, cuando se cambia la selección en el hijo, el padre se actualiza automáticamente.

Componente Hijo (Selector.svelte)

js 
<script>
export let opcionSeleccionada = '';

const opciones = ['Opción 1', 'Opción 2', 'Opción 3'];
</script>

<select bind:value={opcionSeleccionada}>
{#each opciones as opcion}
  <option>{opcion}</option>
{/each}
</select>

Componente Padre (App.svelte)

js 
<script>
import Selector from './Selector.svelte';

let opcion = '';
</script>

<div>
<h1>Selecciona una opción</h1>
<Selector bind:opcionSeleccionada={opcion} />

<p>Has seleccionado: {opcion}</p>
</div>
  Explicación

  • El hijo actualiza la opción seleccionada en el select.
  • El padre recibe automáticamente la opción seleccionada gracias al enlace reactivo.

4: Control de Estado Complejo

En este escenario, se muestra cómo manejar un estado complejo con objetos en Svelte. El componente padre App.svelte enlaza un objeto estadoGlobal con el hijo Estado.svelte, permitiendo que cualquier cambio en el estado se refleje automáticamente en el padre.

Componente Hijo (Estado.svelte)

js 
<script>
export let estado = { activo: false, mensaje: '' };

function alternarEstado() {
  estado.activo = !estado.activo;
  estado.mensaje = estado.activo ? 'Activo' : 'Inactivo';
}
</script>

<button on:click={alternarEstado}>
Alternar Estado
</button>

Componente Padre (App.svelte)

js 
<script>
import Estado from './Estado.svelte';

let estadoGlobal = { activo: false, mensaje: '' };
</script>

<div>
<h1>Estado del Sistema</h1>
<Estado bind:estado={estadoGlobal} />

<p>Estado: {estadoGlobal.mensaje}</p>
</div>
  Explicación

  • El hijo modifica un objeto enlazado.
  • El padre refleja automáticamente los cambios en su interfaz.

  Conclusión

El uso de bind en Svelte 5 simplifica la comunicación entre componentes al proporcionar un mecanismo reactivo para sincronizar datos. Esta técnica elimina la necesidad de emitir y escuchar eventos manualmente, haciendo que el código sea más limpio y fácil de mantener.