¿Cómo se comunica un componente hijo con su componente padre?

Question

Accepted Answer

Un componente hijo se comunica *hacia arriba* con su padre **emitiendo eventos**. El padre los escucha con `@event-name`. Esto completa el flujo de datos unidireccional de Vue: **props hacia abajo, events hacia arriba**. ## Emitiendo desde el componente hijo ```vue ``` ## Escuchando en el componente padre ```vue ``` El componente hijo no puede (y no debería) modificar los datos del padre directamente. En su lugar, *pide* al padre que actúe emitiendo un evento con una carga útil; el padre es propietario de los datos y realiza el cambio. ## Por qué es importante Declarar eventos emitidos con defineEmits ```js const emit = defineEmits(["delete"]); // documents the component's API // or with validation / TypeScript: const emit = defineEmits<{ delete: [id: number] }>(); ``` Declarer eventos emitidos documenta los "outputs" del componente, habilita la verificación de tipos de las cargas útiles y evita que el evento sea tratado accidentalmente como un escucha DOM nativo. ## Otros patrones de comunicación ```text props + emits → parent ↔ direct child (the default, most common) provide/inject → pass data deep down without prop-drilling Pinia store → shared state across unrelated/distant components v-model → two-way binding (props + emit sugar) ``` ## Por qué es importante Emitir eventos es la forma estándar y predecible para que los componentes hijos afecten el estado del padre — preservando el flujo de datos unidireccional (que hace que las apps sean más fáciles de entender y depurar). Conocer `defineEmits` + `@listener`, y saber cuándo pasar a `provide/inject` o Pinia para comunicación no padre-hijo, cubre el modelo de comunicación de componentes de Vue.