La comunicación entre componentes en Vue.js no es de una sola vía. Si ya sabes cómo pasar datos de padre a hijo con props, ahora toca el camino inverso: cómo un componente hijo notifica cambios al padre usando eventos personalizados. Esta técnica es clave para construir interfaces reactivas, modulares y mantenibles.

¿Cómo se comunican los componentes hijos con los padres en Vue?

La respuesta corta es: mediante eventos emitidos. Recuerda que cada componente tiene tres caras: su parte visual, su estado interno y la interfaz con la que conversa con otros componentes. Esa interfaz puede armarse con atributos, slots o eventos, y para enviar información hacia arriba usamos justamente eventos.

¿Por qué no modificar directamente el dato recibido en el hijo? Porque puedes perder la reactividad y el padre no se entera del cambio. Emitir un evento mantiene el flujo de datos predecible.

¿Cómo funciona v-on con eventos nativos antes de los eventos personalizados?

Antes de crear eventos propios, conviene recordar cómo se escuchan los nativos de JavaScript. Con la directiva v-on (o su atajo @) puedes asociar un handler a un evento como click, sin programar la emisión: el navegador ya la dispara por ti.

¿Cómo eliminar un elemento de una lista usando click y filter?

Un caso típico es eliminar ítems de una lista cuando se hace clic en ellos. Para esto necesitas dos piezas: el índice del elemento y un método que actualice el arreglo.

• Recibe el index en el v-for junto con el item.
• Llama a un método remove(index) en el @click del elemento.
• Dentro del método, reasigna la lista usando filter para descartar el índice recibido.

javascript methods: { remove(index) { const items = this.items.filter((item, i) => i !== index) this.items = items } }

Un detalle que suele tropezarte: si solo retornas el resultado del filter sin reasignarlo a this.items, la vista no se vuelve a renderizar. La reactividad de Vue depende de esa asignación. Si algo no actualiza, un console.log rápido te dice si el evento llega y qué devuelve tu lógica. Los errores son tus amigos.

¿Cómo crear eventos personalizados con $emit en Vue.js?

Aquí entra lo interesante. Cuando el clic ocurre dentro del componente hijo y necesitas que el padre reaccione, no basta con un evento nativo: hay que emitir un evento custom desde el hijo y escucharlo en el padre.

El flujo se ve así:

1. En el componente hijo, escucha el clic interno con v-on:click y dispara un método propio, por ejemplo rm.
2. Dentro de ese método, llama a this.$emit('remove') para notificar al padre.
3. En el padre, escucha el evento con @remove="remove(index)" sobre la etiqueta del componente hijo.

html <v-item v-for="(item, index) in items" :item="item" @remove="remove(index)" />

Y en el hijo:

javascript methods: { rm() { this.$emit('remove') } }

¿Qué hace this.$emit en Vue? Dispara un evento personalizado desde el componente hijo. El primer argumento es el nombre del evento y el segundo (opcional) es el valor que quieres enviar al padre.

¿Cómo enviar datos junto con un evento emitido?

La magia se amplía cuando agregas un segundo argumento a $emit. Ahí puedes mandar lo que necesites: una cadena, un número, un objeto JSON o incluso un arreglo.

• this.$emit('remove', item.id) envía el id del ítem.
• this.$emit('update', { texto: 'nuevo' }) manda un objeto con datos.
• En el padre, ese valor llega como primer argumento de la función handler.

Esto te permite construir eventos como update, add, select o cualquier nombre que describa la acción, siempre que no choque con uno nativo de JavaScript.

¿Puedo nombrar mi evento como quiera? Sí, mientras no uses nombres reservados de eventos nativos del DOM como click, submit o input. Usa nombres descriptivos en kebab-case para mejor legibilidad.

¿Por qué Vue.js se considera un framework progresivo?

No necesitas dominar cada API antes de empezar a construir. Con props, eventos emitidos y slots ya tienes lo esencial para crear componentes que se comunican en ambas direcciones: padre a hijo con atributos e hijo a padre con $emit. La recomendación es practicar con ejercicios pequeños para aterrizar el conocimiento.

¿Qué se te ocurre construir con eventos personalizados? Cuéntalo en los comentarios.