.png)
Imagina el juego del teléfono roto. Una persona susurra un mensaje, otros lo van pasando y, al final, llega al destinatario correcto. Eso es el reenvío de eventos en Svelte: un componente hijo detecta algo, por ejemplo un click, y en lugar de gestionarlo por sí mismo, pasa el micrófono al padre para que este decida qué hacer.
Esto es extremadamente útil al crear componentes reutilizables. Tal vez quieres un botón con estilo propio o marcado adicional, pero no deseas que ese componente decida la acción al pulsarlo. Esa responsabilidad pertenece al padre.
Paso 1: Botón básico. Crea un componente Button que reciba desde el padre una función onclick y se la asigne al botón interno. Al hacer click, se ejecuta la función del padre. Es la forma más simple de cableado de eventos: el botón produce clicks y el padre decide su efecto.
Paso 2: Botón con estilo. Crea FancyButton como contenedor que envuelve a Button, añade clase para estilos y, sobre todo, reenvía la prop onclick hacia el Button real. Si no reenvías onclick, el evento se queda atrapado en el contenedor y el padre no se entera.
Paso 3: Uso en el padre. El padre pasa handleClick al FancyButton. Al pulsar, el Button interno lanza el evento, FancyButton lo reenvía y handleClick incrementa un contador. Es el mismo teléfono roto: Button susurra, FancyButton retransmite, el padre escucha.
Paso 4: Qué ocurre si no se reenvía. Con un BrokenFancyButton que no reenvía onclick, el padre jamás recibe el evento y la cadena se rompe.
Paso 5: Reenviar más que clics. Un TextField puede aceptar oninput, onfocus y onblur del padre y pasarlos al input interno. El contenedor no decide nada, solo actúa como relé. Para el padre, se siente como un input nativo.
Paso 6: Control explícito. El reenvío es selectivo y explícito. Si el contenedor no expone onblur, el onblur del padre no se disparará. Esto no es un fallo, es diseño de API: decides qué eventos forman parte del contrato público del componente.
Paso 7: La visión general. Los componentes pueden envolver a otros; los eventos pueden quedar atrapados si no se reenvían; el reenvío hace invisibles a los contenedores; y el reenvío es explícito, por lo que solo los eventos que elijas sobrevivirán la subida en la jerarquía.
Paso 8: Componentes controlados vs no controlados. No controlado: el hijo gestiona su propio estado, por ejemplo un input con estado local text. Controlado: el padre posee el estado, el hijo solo lo refleja mediante un valor enlazable. Elige no controlado cuando el widget es autocontenido y simple; elige controlado cuando el padre necesita validación, sincronización o gobernanza del dato. Regla práctica: usa controlado cuando el padre debe estar al mando, no controlado cuando el estado local sea suficiente.
Paso 9: Mini proyecto de chat con selector de emojis. EmojiPicker emite onselect al pulsar un emoji; ChatInput mantiene un message local, permite enviar con Enter o con un botón y llama a onsend con el contenido; el padre recibe cada mensaje y lo agrega a una lista. Así combinamos props, enlaces de datos, eventos y reenvío en un caso real.
Paso 10: Cierre. Con cuatro herramientas — props, eventos, enlaces y reenvío — puedes diseñar componentes transparentes, reutilizables y potentes. Estos patrones escalan a formularios, reproductores multimedia o paneles de negocio. Cada vez que envuelvas un componente, pregúntate: sigo pasando el mensaje. Si la respuesta es sí, la app se mantiene predecible.
En Q2BSTUDIO llevamos estos patrones del mundo Svelte a productos reales con foco en rendimiento, escalabilidad y seguridad. Diseñamos aplicaciones a medida y software a medida con arquitectura moderna, incorporando inteligencia artificial, agentes IA e ia para empresas para automatizar decisiones, así como ciberseguridad y pentesting para proteger tus activos. Integramos servicios cloud aws y azure con pipelines sólidos y observabilidad, y ofrecemos servicios inteligencia de negocio con power bi para que tus datos hablen y generen impacto. Si tu organización busca acelerar su producto con un equipo experto, conoce nuestras soluciones de desarrollo y arquitectura en aplicaciones a medida y software a medida, o explora cómo la inteligencia artificial puede transformar tus procesos de extremo a extremo.
Ideas prácticas para tu equipo: define qué eventos reenvía cada contenedor y documenta la API; evita filtrar o transformar eventos sin necesidad, prioriza la transparencia; elige componentes controlados cuando el dato sea crítico para validación, sincronización entre vistas o auditoría; aprovecha contenedores finos para encapsular estilos y accesibilidad sin capturar la lógica de negocio; en entornos cloud, acompaña estos patrones con despliegues en servicios cloud aws y azure y políticas de ciberseguridad. Al medir resultados con servicios inteligencia de negocio y power bi, podrás iterar rápido y con datos.
Próximo paso en tu dominio de Svelte: condicionales e iteraciones con bloques if, each y listas con clave para reconciliación eficiente. Y si necesitas un partner tecnológico de principio a fin, Q2BSTUDIO puede ayudarte a diseñar, desarrollar, desplegar y asegurar tu plataforma con automatización de procesos, arquitectura cloud nativa, ia para empresas y mejores prácticas de ingeniería.
