Eventos personalizados con createEventDispatcher
Emita eventos personalizados tipados desde componentes hijo para que los gestione el padre
Eventos personalizados con createEventDispatcher es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Por qué usar eventos personalizados
Los componentes secundarios se comunican con los superiores mediante el envío de eventos personalizados que el componente superior escucha.
Importar el dispatcher
Importe createEventDispatcher desde svelte y cree uno dentro de su script.
<script>
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
</script>Enviar un evento
Llame a dispatch(name, detail) para emitir un evento. Los componentes superiores escuchan con on:name.
function save() { dispatch("save", { id: 42 }); }Escuchar en el componente superior
Trate los eventos personalizados como eventos del DOM.
<Child on:save={(e) => console.log(e.detail.id)} />Datos del evento
El segundo argumento se convierte en event.detail en el lado del consumidor.
No se propagan de forma predeterminada
Los eventos personalizados no se propagan automáticamente por el árbol de componentes de Svelte. Reenvíelos explícitamente si es necesario.
Eventos tipados
Con TypeScript, puede definir el tipo de los eventos para obtener autocompletado en los componentes superiores.
const dispatch = createEventDispatcher<{ save: { id: number } }>();Eventos cancelables
Pase { cancelable: true } como tercer argumento para permitir que los componentes superiores llamen a preventDefault.
Varios eventos
Un dispatcher puede emitir muchos tipos de eventos; use nombres únicos para cada intención.
Evitar nombres genéricos
Prefiera nombres específicos como itemSelected en lugar de nombres genéricos como change.
Evento frente a callback
Los eventos son adecuados para enviar señales hacia componentes superiores; para una integración estrecha, considere pasar props de tipo callback.
Comprobación rápida
¿Cómo lee un componente superior los datos de un evento?
Resumen
Use createEventDispatcher para emitir eventos con nombre y una carga útil de datos, y escúchelos con on:eventName.
Preguntas frecuentes
¿La lección «Eventos personalizados con createEventDispatcher» es gratis?
Sí — el texto completo de «Eventos personalizados con createEventDispatcher» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Eventos personalizados con createEventDispatcher»?
Emita eventos personalizados tipados desde componentes hijo para que los gestione el padre Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Eventos personalizados con createEventDispatcher»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- on:click, on:input y on:submit
- Modificadores de eventos: preventDefault, stopPropagation y once
- Eventos personalizados con createEventDispatcher
- Transferencia de eventos con on:click