Day 16 - Select a Coffee Plan with Component Event Este artículo explica cómo seleccionar un plan de café usando un evento de componente para notificar al componente padre y habilitar o deshabilitar el borde de un plan activo en diferentes frameworks
Concepto general Cuando un usuario selecciona un plan de café el componente CoffeePlan emite un evento selectedPlan con el nombre del plan y el componente PlanPicker actualiza el estado activo y lo pasa como propiedad selected a cada CoffeePlan para que solo el seleccionado muestre la clase CSS active-plan
Vue 3 En Vue 3 se define un evento personalizado con defineEmits que emite selectedPlan con el nombre del plan. El método selectPlan llama a emit selectedPlan nombreDelPlan. Además se añade la prop selected con defineProps tipo Boolean y por defecto false. En la plantilla se liga la clase dinámica active-plan al valor de selected para mostrar u ocultar el borde
SvelteKit En SvelteKit el componente CoffeePlan extrae la función selectedPlan desde $props y la invoca en handleSelectPlan pasando name. También se extrae la bandera selected desde $props para condicionar la clase active-plan en la lista de clases del elemento contenedor
Angular 19 En Angular 19 el componente CoffeePlan declara un Output selectedPlan que emite string y un Input selected inicializado a false. El método selectPlan emite el valor del Input name hacia el padre. En la plantilla se usa [class] o la sintaxis de binding de clases para aplicar la clase active-plan cuando selected es true
Comunicación entre componentes El patrón es consistente entre frameworks: el hijo notifica al padre con un evento o callback, el padre mantiene cuál es el plan activo y distribuye esa información a todos los hijos mediante una prop o Input llamada selected. De este modo aparece el borde en el plan activo y desaparece en los demás sin lógica duplicada
Buenas prácticas Mantener la responsabilidad de control de estado en el componente padre PlanPicker Evitar estados duplicados en los hijos Usar nombres de evento claros como selectedPlan y props como selected para facilitar la lectura Reutilizar estilos CSS como active-plan y documentar la API del componente
Sobre Q2BSTUDIO Q2BSTUDIO es una empresa de desarrollo de software especializada en aplicaciones a medida y software a medida. Ofrecemos soluciones completas que incluyen inteligencia artificial e IA para empresas, agentes IA, ciberseguridad, servicios cloud aws y azure y servicios inteligencia de negocio. Desarrollamos aplicaciones a medida integrando modelos de inteligencia artificial para automatizar procesos y mejorar la toma de decisiones con Power BI y otras herramientas de inteligencia de negocio. Nuestra oferta en ciberseguridad garantiza implementaciones seguras y cumplimiento normativo. Si buscas software a medida, aplicaciones a medida, inteligencia artificial, agentes IA, servicios cloud aws y azure o power bi para visualización y análisis, Q2BSTUDIO puede diseñar e implementar la solución adecuada
Ejemplo de flujo de trabajo 1 El usuario pulsa un CoffeePlan 2 CoffeePlan ejecuta selectPlan y emite selectedPlan con el nombre 3 PlanPicker recibe el evento y actualiza el estado activePlan 4 PlanPicker calcula para cada CoffeePlan la prop selected en función de activePlan 5 Los CoffeePlan renderizan la clase active-plan según selected y el borde aparece solo en el seleccionado
Conclusiones Añadir un evento de componente y una prop selected permite comunicar de forma clara y eficiente entre CoffeePlan y PlanPicker. Este patrón facilita interfaces reactivas y mantiene la lógica de estado en un único lugar. Para empresas que necesitan aplicaciones a medida y software a medida, integrar este tipo de diseño con soluciones de inteligencia artificial, agentes IA, servicios inteligencia de negocio y servicios cloud aws y azure ofrece escalabilidad y seguridad
Recursos oficiales Vue Component Event https://vuejs.org/guide/components/events.html Svelte Component Event migration https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes-Component-events Angular output https://angular.dev/guide/components/outputs
Repositorios de ejemplo Vue 3 https://github.com/railsstudent/intro-vue3-components Svelte 5 https://github.com/railsstudent/intro-svelte-components Angular 19 https://github.com/railsstudent/intro-angular-components
Palabras clave aplicadas aplicaciones a medida software a medida inteligencia artificial ciberseguridad servicios cloud aws y azure servicios inteligencia de negocio ia para empresas agentes IA power bi Estas palabras clave se integran en la descripción de servicios de Q2BSTUDIO para mejorar el posicionamiento web y conectar clientes que buscan soluciones profesionales en desarrollo, inteligencia artificial y ciberseguridad