createEventDispatcher

Vamos a construir una pequeña aplicación en Svelte que nos permita entender cómo propagar eventos desde un subcomponente hacia el componente principal. La idea es sencilla: tenemos un botón que, al pulsarlo, debe notificar a la aplicación principal para que actualice un contador que indica cuántas veces se ha pulsado.

Aunque podríamos hacer todo en un único componente, aquí queremos simular un escenario más realista donde el botón es un subcomponente independiente. Esto puede ocurrir porque estemos usando un componente importado de una librería externa o porque nuestro equipo de diseño nos haya proporcionado un botón con estilos y funcionalidades específicas. En cualquier caso, el botón genera eventos localmente, pero necesitamos que la aplicación principal se entere de esos eventos para reaccionar.

Para lograr esta comunicación hacia arriba, Svelte nos ofrece la función createEventDispatcher. Esta función la importamos directamente desde el paquete svelte y nos permite crear un despachador de eventos personalizado. Cuando llamamos a createEventDispatcher, obtenemos una función que podemos usar para emitir eventos con un nombre y, opcionalmente, con datos adicionales.

En el subcomponente del botón, declaramos el despachador así:

import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher();

function pulsar() {
  dispatch('pulsado');
}

Aquí, la función pulsar se ejecuta cuando el usuario hace clic en el botón. Al llamar a dispatch('pulsado'), estamos emitiendo un evento llamado pulsado que podrá ser capturado por el componente padre.

Es importante pensar bien en los nombres que damos a estos eventos para evitar confusiones, especialmente si la aplicación crece y hay muchos eventos diferentes. Aunque en este ejemplo usamos un nombre simple como pulsado, en proyectos más complejos conviene establecer una convención clara.

En el componente principal, donde usamos el subcomponente botón, podemos escuchar este evento con la sintaxis habitual de Svelte para eventos personalizados:

<Button on:pulsado={sePulso} />

Aquí, sePulso es una función que definimos para manejar el evento. Por ejemplo, podemos incrementar un contador cada vez que se recibe el evento:

let veces = 0;

function sePulso() {
  veces += 1;
}

Así, cada vez que el botón se pulsa, el evento pulsado se dispara desde el subcomponente, llega al componente padre y ejecuta la función que actualiza el contador.

Este mecanismo de propagación funciona siempre hacia el componente padre inmediato. Si necesitamos enviar eventos más arriba en la jerarquía, habría que considerar otras estrategias, pero para la mayoría de casos esta forma es suficiente y muy sencilla de implementar.

Además, aunque en este ejemplo no hemos añadido datos adicionales al evento, dispatch permite enviar un segundo argumento con información extra, lo que puede ser útil para pasar detalles sobre la interacción.

Con este patrón, podemos mantener nuestros componentes bien organizados y comunicados sin necesidad de recurrir a soluciones más complejas. La función createEventDispatcher es una herramienta muy potente y simple para manejar eventos personalizados en Svelte.