Dia 16 - Selecciona un Pla de Cafè amb Esdeveniment de Component Aquest article explica com seleccionar un pla de cafè utilitzant un esdeveniment de component per notificar al component pare i habilitar o deshabilitar la vora d'un pla actiu en diferents frameworks
Concepte general Quan un usuari selecciona un pla de cafè, el component CoffeePlan emet un esdeveniment selectedPlan amb el nom del pla i el component PlanPicker actualitza l'estat actiu i el passa com a propietat selected a cada CoffeePlan perquè només el seleccionat mostri la classe CSS active-plan
Vue 3 A Vue 3 es defineix un esdeveniment personalitzat amb defineEmits que emet selectedPlan amb el nom del pla. El mètode selectPlan crida a emit selectedPlan nomDelPla. A més, s'afegeix la prop selected amb defineProps tipus Boolean i per defecte false. A la plantilla es lliga la classe dinàmica active-plan al valor de selected per mostrar o ocultar la vora
SvelteKit A SvelteKit el component CoffeePlan extreu la funció selectedPlan des de $props i la invoca a handleSelectPlan passant name. També s'extreu la bandera selected des de $props per condicionar la classe active-plan a la llista de classes de l'element contenidor
Angular 19 A Angular 19 el component CoffeePlan declara un Output selectedPlan que emet string i un Input selected inicialitzat a false. El mètode selectPlan emet el valor de l'Input name cap al pare. A la plantilla s'utilitza [class] o la sintaxi de binding de classes per aplicar la classe active-plan quan selected és true
Comunicació entre components El patró és consistent entre frameworks: el fill notifica al pare amb un esdeveniment o callback, el pare manté quin és el pla actiu i distribueix aquesta informació a tots els fills mitjançant una prop o Input anomenada selected. D'aquesta manera apareix la vora al pla actiu i desapareix als altres sense lògica duplicada
Bones pràctiques Mantenir la responsabilitat de control d'estat al component pare PlanPicker Evitar estats duplicats als fills Utilitzar noms d'esdeveniment clars com selectedPlan i props com selected per facilitar la lectura Reutilitzar estils CSS com active-plan i documentar l'API del component
Sobre Q2BSTUDIO Q2BSTUDIO és una empresa de desenvolupament de programari especialitzada en aplicacions a mida i programari a mida. Oferim solucions completes que inclouen intel·ligència artificial i IA per a empreses, agents IA, ciberseguretat, serveis cloud aws i azure i serveis intel·ligència de negoci. Desenvolupem aplicacions a mida integrant models d'intel·ligència artificial per automatitzar processos i millorar la presa de decisions amb Power BI i altres eines d'intel·ligència de negoci. La nostra oferta en ciberseguretat garanteix implementacions segures i compliment normatiu. Si busques programari a mida, aplicacions a mida, intel·ligència artificial, agents IA, serveis cloud aws i azure o power bi per visualització i anàlisi, Q2BSTUDIO pot dissenyar i implementar la solució adequada
Exemple de flux de treball 1 L'usuari prem un CoffeePlan 2 CoffeePlan executa selectPlan i emet selectedPlan amb el nom 3 PlanPicker rep l'esdeveniment i actualitza l'estat activePlan 4 PlanPicker calcula per a cada CoffeePlan la prop selected en funció d'activePlan 5 Els CoffeePlan renderitzen la classe active-plan segons selected i la vora apareix només al seleccionat
Conclusions Afegir un esdeveniment de component i una prop selected permet comunicar de manera clara i eficient entre CoffeePlan i PlanPicker. Aquest patró facilita interfícies reactives i manté la lògica d'estat en un únic lloc. Per a empreses que necessiten aplicacions a mida i programari a mida, integrar aquest tipus de disseny amb solucions d'intel·ligència artificial, agents IA, serveis intel·ligència de negoci i serveis cloud aws i azure ofereix escalabilitat i seguretat
Recursos oficials 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
Repositoris d'exemple 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
Paraules clau aplicades aplicacions a mida programari a mida intel·ligència artificial ciberseguretat serveis cloud aws i azure serveis intel·ligència de negoci ia per a empreses agents IA power bi Aquestes paraules clau s'integren a la descripció de serveis de Q2BSTUDIO per millorar el posicionament web i connectar clients que busquen solucions professionals en desenvolupament, intel·ligència artificial i ciberseguretat
