Imagina que estás creando una app con botones, formularios y checkboxes. Una de las primeras preguntas que aparece es
como se comunican realmente mis componentes entre sí
Ese es el corazón de la comunicación padre hijo en Svelte. Y como en la vida real, la comunicación va en ambos sentidos
el padre pasa datos hacia abajo con props, el hijo avisa hacia arriba con eventos y ambos pueden compartir exactamente el mismo estado con enlaces bindings.
En esta guía nos enfocamos en hijo a padre y estado compartido eventos y enlaces. Al final sabrás cómo hacer fluir los datos en todas las direcciones en Svelte 5 y cómo aplicar estos patrones en proyectos de software a medida y aplicaciones a medida como los que construimos en Q2BSTUDIO.
Recordatorio de estructura del proyecto
src routes contiene las páginas, src routes +page.svelte es la página de entrada y src lib alberga componentes reutilizables. Crearemos los componentes en src lib y los probaremos dentro de src routes +page.svelte.
Sección 1 Eventos el hijo hablando con el padre
Props sirven para comunicación descendente el padre da instrucciones. Pero cuando el hijo necesita decir he terminado o ha pasado algo, usamos eventos. En Svelte 5 no se requiere createEventDispatcher como en Svelte 3 o 4, basta con pasar funciones callback como props.
Modelo mental
props el padre indica qué hacer. eventos el hijo notifica lo que sucedió. Piensa en props como instrucciones y en eventos como un megáfono hacia arriba.
Ejemplo 1 botón que saluda al padre
Archivo src lib ChildButton.svelte
<script> let { onHello } = $props(); function handleClick() { onHello?.(); } </script> <button on:click={handleClick}>Say Hello</button>
Archivo src routes +page.svelte
<script> import ChildButton from $lib/ChildButton.svelte; function handleHello() { alert(); } </script> ChildButton onHello={handleHello}
Qué está pasando el hijo declara un prop onHello que el padre rellena con una función. Al hacer clic, la función del padre se ejecuta. Sin dispatcher, solo callbacks.
Ejemplo 2 enviar datos al padre
Archivo src lib NameForm.svelte
<script> let { onSubmit } = $props(); let name = $state(); function submitForm() { onSubmit?.({ name }); name = ; } </script> <form on:submit|preventDefault={submitForm}> <input bind:value={name} /> <button type=submit>Enviar</button> </form>
Archivo src routes +page.svelte
<script> import NameForm from $lib/NameForm.svelte; function handleSubmit({ name }) { console.log(name); } </script> NameForm onSubmit={handleSubmit}
Claves el hijo llama al callback con una mochila de datos por ejemplo { name }. El padre recibe esa info en su manejador. El modificador preventDefault evita recargar la página.
Resumen rápido eventos
ping simple el hijo dice hola sin datos. con datos el hijo envía el formulario como un paquete. Un callback prop es el megáfono que el padre entrega al hijo. El hijo lo invoca y el padre reacciona.
Sección 2 Enlaces bindings compartir estado
Cuando padre e hijo necesitan ver siempre el mismo valor sin gritar por cada cambio, usa enlaces. Un binding mantiene sincronizados ambos lados como si compartieran el mismo cuaderno.
Dos ingredientes de los bindings
1 $bindable habilita que un prop pueda sincronizarse en ambos sentidos. Ejemplo let { text = $bindable() } = $props(); así el hijo acepta un prop text actualizable desde el padre y desde el propio hijo.
2 bind propiedad sintaxis especial para enlazar una variable a una propiedad soportada. Ejemplos bind value en inputs, bind checked en checkboxes, bind open en details. Funciona en elementos HTML y también en props marcados con $bindable en componentes hijos.
Ejemplo 1 binding de texto
Archivo src lib TextInput.svelte
<script> let { text = $bindable() } = $props(); </script> <input bind:value={text} />
Archivo src routes +page.svelte
<script> import TextInput from $lib/TextInput.svelte; let name = $state(); </script> Hola span {name} o stranger span TextInput bind:text={name}
Al escribir, name cambia en el padre al instante. Si el padre actualiza name, el input también cambia. Estado realmente compartido.
Ejemplo 2 binding de checkbox
Archivo src lib CheckBox.svelte
<script> let { checked = $bindable() } = $props(); </script> <label> <input type=checkbox bind:checked={checked} /> Acepto términos </label>
Archivo src routes +page.svelte
<script> import CheckBox from $lib/CheckBox.svelte; let accepted = $state(false); </script> CheckBox bind:checked={accepted} accepted si no aceptado
Modelo mental final props el padre escribe en el cuaderno del hijo. eventos el hijo grita hacia el padre. bindings ambos escriben en el mismo cuaderno y se sincronizan al instante.
Sección 3 Cuándo usar eventos y cuándo bindings
Usa eventos cuando una acción puntual importa botón clic, envío de formulario, guardar, borrar, navegar. Son notificaciones tipo ha pasado algo.
Usa bindings cuando un valor debe estar siempre sincronizado texto de un input, un toggle, un slider, un select o cualquier control vivo que interesa a ambos lados. Son como un documento compartido donde todos ven la última versión.
Sección 4 Detalles y trampas comunes
1 Nombres de callbacks distinguen mayúsculas y minúsculas si el hijo espera onHello el padre debe pasar onHello exacto, no onhello ni on:hello.
2 No olvides invocarlo declarar let { onSave } = $props() no hace nada por sí mismo. Llama a onSave?.() en el momento correcto.
3 Bindings solo funcionan en propiedades soportadas como bind value en input textarea select, bind checked en checkbox radio, bind open en details o propiedades de video audio como bind currentTime. Si intentas bind loquesea no pasará nada. Consulta la documentación oficial de Svelte bind cuando tengas dudas.
4 No enlaces todo abusar de bindings puede enredar el estado. Regla práctica bindings para campos de formulario y toggles, eventos para acciones mayores como guardar o enviar.
5 No puedes enlazar valores derivados solo variables de estado como $state o props $bindable. Si tienes let price = $state(100) y let discounted = $derived(price * 0.9) no enlaces discounted porque es de solo lectura. Enlaza price y calcula discounted aparte.
Sección 5 Cierre
Props bajan datos, eventos suben notificaciones, enlaces comparten estado. Con estas tres piezas resuelves la gran mayoría de escenarios reales en Svelte 5 y puedes construir interfaces robustas y reutilizables en productos de software a medida y aplicaciones a medida.
En Q2BSTUDIO desarrollamos soluciones end to end que combinan frontend con Svelte, backend escalable y arquitectura moderna, integrando además inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio y power bi, automatización de procesos, agentes IA e IA para empresas. Si buscas un partner para crear una plataforma sólida y escalable, descubre cómo abordamos proyectos de aplicaciones a medida con nuestro enfoque ágil en el área de desarrollo multicanal visitando soluciones de software a medida.
Ya sea que quieras un MVP rápido con formularios y estados compartidos, o una suite empresarial con componentes de alto rendimiento, pruebas de seguridad, analítica con power bi y despliegues en servicios cloud aws y azure, podemos ayudarte a convertir estos patrones de Svelte en productos reales y listos para producción. Conoce más sobre cómo diseñamos y mantenemos ecosistemas completos de software a medida en nuestro servicio de desarrollo de aplicaciones a medida.
Próximo paso profundiza en reenvío de eventos y patrones avanzados para hacer que tus componentes sean aún más flexibles y desacoplados, manteniendo una comunicación clara entre padres e hijos y un estado predecible en toda tu aplicación.