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

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.

Ejemplo 2: Formulario Reactivo

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.

Ejemplo 3: Selector de Opciones

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.

Ejemplo 4: Control de Estado Complejo

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.