Comunicación entre Componentes en Vue: Emisión y Manejo de Eventos

Contenido del curso

Introducción

Rendering Declarativo y Manipulación de DOM

Sistema de Componentes

Ambiente de Desarrollo

Platzi Exchange

¡A producción!

38
Publicación de Aplicaciones con Git y Netlify
05:37 min

Rendering Declarativo y Manipulacion de DOM

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:17

Comunicación entre Componentes en Vue: Emisión y Manejo de Eventos

Curso Básico de Vue.js 2

Clase 18 de 38

Clase 18 / 38

Recursos

¿Cómo los componentes hijos envían datos a sus componentes padres?

Entender cómo se comunican los componentes en una aplicación es crucial para su correcta implementación. Cuando un componente hijo necesita enviar información a su componente padre, se utilizan eventos. Este tipo de comunicación permite mantener la coherencia en los estados de los componentes y garantiza que las propiedades definidas en el componente padre no sean alteradas directamente por el hijo.

Las propiedades de un componente padre no deben ser modificadas por un componente hijo.
La notificación de cambios se realiza mediante eventos emitidos desde el componente hijo.
La comunicación de padre a hijo se realiza a través de propiedades, mientras que de hijo a padre se hace mediante eventos.

¿Cómo emitir eventos desde un componente hijo?

Para posibilitar que un componente hijo informe al padre sobre un cambio, es necesario emitir un evento. Este proceso es fundamental para asegurar que el componente padre pueda reaccionar adecuadamente sobre cualquier modificación en el componente hijo.

Ejemplo de emisión de evento

Vamos a ilustrar este proceso con un ejemplo simple donde se modifica el color de fondo de un elemento al realizar un 'touch':

Definir la propiedad en el padre:
- La propiedad color se define en el componente padre, y el componente hijo no tiene acceso directo a esta.
Emisión del evento desde el hijo:
- En el componente hijo, utilizar una función llamada emit para emitir un evento, en este caso, @emit('changeColor').

this.$emit('changeColor');

Escuchar el evento en el padre:
- En el archivo HTML del componente padre, usar la directiva @ para escuchar este evento.

<my-component @changeColor="handleChangeColor"></my-component>

Definir la función manejadora en el padre:
- Implementar la lógica que responde al evento dentro de la instancia del componente padre.

methods: {
  handleChangeColor(newColor) {
    if (newColor) {
      this.color = newColor;
    } else {
      // Revertir al color original si no se proporciona uno nuevo
      this.color = 'originalColor';
    }
  }
}

¿Cómo enviar valores con eventos?

Al emitir un evento, es posible adjuntar un valor que acompañe al evento, permitiendo al componente padre recibir directamente el nuevo valor que debe establecer.

Utilizando un segundo argumento en la función emit para enviar el nuevo color al padre:

this.$emit('changeColor', 'blue');

En el método del padre, recibir este argumento como parámetro y decidir qué acción tomar:

methods: {
  handleChangeColor(newColor) {
    this.color = newColor || this.defaultColor;
  }
}

¿Cómo mantener componentes aislados?

En el contexto de aplicaciones con múltiples instancias de un mismo componente, es sumamente importante que cada instancia mantenga su estado propio y aislado.

Aislamiento de componentes

Cada componente debe tener su propia copia de los datos. Esto se logra declarando data como una función que devuelve un objeto:

data() {
  return {
    color: 'defaultColor'
  };
}

Al asegurar que data devuelve un objeto en cada instancia, garantizamos que los componentes no compartan el estado, evitando así la interferencia entre ellos.

Esta metodología permite que, aunque se tengan múltiples componentes similares en una página, cada uno mantenga y gestione su propio estado, asegurando un comportamiento predecible y sin conflictos.

Uriel Alberto Arevalo Franco

Hace 6 años

COMUNICACIÓN ENTRE COMPONENTES: EVENTOS (Clase 18)

¿Qué debemos hacer cuando un componente hijo necesita enviar información a un componente padre? Lo que debemos hacer es enviar eventos. Las propiedades del componente padre nunca deben ser actualizadas por el componente hijo. En caso de que haya que modificar una de estas propiedades, el componente hijo tiene que notificar al padre y esta notificación se hace a través de eventos. Se puede decir entonces que la comunicación de padre a hijo es con propiedades y de hijos a padres es con eventos. De esta manera mantenemos la consistencia en Vue.js.

Recordemos que usamos el v-bind para modificar en tiempo real o tener un atributo dinámico en cuanto a las propiedades y vamos a usar la emisión de eventos con la directiva v-on para que el componente hijo pueda enviar información al componente padre.

Tomando el código de la clase precedente, lo que vamos a hacer ahora es modificar la variable color del componente padre usando el componente hijo. El componente hijo debe emitir un evento para avisarle al componente padre.

Vamos a hacerlo con la función this.$emit('change-color') inserta en la función toggleShowPrices() que está en methods del componente hijo.

methods: {
    toggleShowPrices() {
      this.showPrices = !this.showPrices;
      this.$emit('change-color')
     }
  },

Luego, en el Html , en <coin-detai> insertamos la directiva v-on: change-color=”updateColor ” (Significa: escuchar al evento change-color)

coin-detail 
    v-on:change-color="updateColor"
    v-bind:coin="btc"
    >  </coin-detail>

Ahora, en el componente principal (el padre) se define, en este ejemplo, el comportamiento de change-color, así:

methods:{
updateColor(){
  this.color = this.color.split('').reverse().join('')
    }
  }
})

Al momento de emitir un evento también podemos emitir un valor que vaya acompañando ese evento. En el argumento de la función this.$emit('change-color') colocaremos el color que queremos, asi:

methods: {
    toggleShowPrices() {
      this.showPrices = !this.showPrices;
      this.$emit('change-color', 'ff96C8')
     }
  },

Luego en el componente principal podríamos cambiar el método updateColor() así:

methods:{
updateColor(color){
  this.color = color || this.color
  .split('').reverse().join('')
     }
   }
})

De esta manera el color va a ser siempre 'ff96C8' (color rosa). Una variante que podríamos hacer es esta:

methods: {
    toggleShowPrices() {
      this.showPrices = !this.showPrices;
      this.$emit('change-color', 
      this.showPrices ? 'ff96C8' : '3d3d3d')
     }
  },

Ahora bien, si repito el componente <coin-detail> de la forma como se ve enseguida, cada <coin-detail> se va a comportar de manera aislada. Por eso es importante que la función que tenemos dentro de data sea justamente una función que devuelva un objeto. Si en lugar de una función tuviésemos un objeto no seríamos capaces de mantener una referencia aislada para cada componente. De esta forma podemos garantizar que cada componente tiene su propio estado y que cuando se modifica el estado de un componente, por más que sea el mismo tipo de componente, no se va a modificar el estado del otro.

<div id="app" v-bind:style="{background: '#'+ color}">

    <coin-detail 
    v-on:change-color="updateColor"
    v-bind:coin="btc"
    >  </coin-detail>

    <coin-detail 
    v-on:change-color="updateColor"
    v-bind:coin="btc"
    >  </coin-detail>

    <coin-detail 
    v-on:change-color="updateColor"
    v-bind:coin="btc"
    >  </coin-detail>

  </div>

VERDUGO CHAVEZ DIANA ALEJANDRA

Hace 6 años

Gracias por el aporte

Jhasmany Roque Chambi

Hace 6 años

Muchas Gracias! = )

Comentarios (38)38 comentarios

Fernando Andres Muñoz Suazo

Cuando el componente hijo debe enviar información al componente padre, se deben enviar eventos, ya que las propiedades del componente padre nunca deben ser actualizadas por el componente hijo. . La comunicación de padres hacia hijos es a través de propiedades y la comunicación entre hijos hacia padres es a través de eventos. . v-on para enviar eventos hacia el componente padre. . $emit pertenece al core de VueJS permite indicar que el componente debe de emitir un evento.

this.$emit('nombre-del-evento')

En el HTML dentro de nuestro componente hijo agregamos la directiva v-on para indicar que esté escuchando el evento:

<coin-detail v-on:nombre-del-evento="funcion-a-ejecutar"</coin-detail>

Cada componente es totalmente aislado, es por ello que es importante que la función data sea una función que devuelva un objeto, de esta forma podemos garantizar que cada componente tiene su propio estado y que cuando se modifica este estado no se va a modificar el estado de otra instancia de este mismo componente. Si no fuera una función no seriamos capaces de mantener una referencia aislada de cada uno de nuestros componentes.

Roberto Shirásago Domínguez

La comunicación de PADRES -> HIJOS debe ser con propiedades

          - Se utiliza PROPS para recibir los objetos del componente padre
          - props: ['variableDelPadre']

      - La comunicación de HIJOS -> PADRES debe ser con eventos

          - Se utiliza this$emit('unNombreParaElEvento') en JS
          - Se utiliza v-on:un-nombre-para-el-evento="nombreDelEventoPadre" en HTML

Esteban Molina Gomez

Hace 5 años

Muchas gracias

jonathan sanchez

Hace 7 años

un componente padre se comunica con un componente hijo a travez de propiedades.

un componente hijo se comunica con un componente padre a travez de eventos.

Abner Batz

Para mantener consistencia en Vue.js, la comunicación de padres hacia hijos debe ser por medio de propiedades y de hijos hacia padres por medio de eventos.

Aarón González

Con esta clase se me viene unas ideas para hacer un Dark Theme :D de una página

Nacho Anaya

Profesor

Es una gran idea, de hecho podes usar una media query de CSS que te ayuda a detectar si el OS esta o no en dark mode.

@media (prefers-color-scheme: dark) {

}

¡Wow! No sabía de aquello :D

Muchas gracias profe @ianaya89 :D

Nicolas Alejandro Middi

el final -> 🤯

Elvis Milan

Resumen de la clase

$emit('functionName','Paremeter')

Renato Renzo Luna Herrera

Ese momento en el que descubres que fue buena idea prestar atención en la clase de programación orientada a objetos en la Universidad

Victor Edgardo Diaz Herrera

Hola, Tengo una situación que ustedes ya deben haber solucionado, estoy haciendo un componente de búsqueda (para búsqueda universal en el diseño de la aplicación, esta puesta dentro de app.vue), quiero atrapar ese evento desde otro componente, un componente hermano, no es un hijo. El $emit() lo hace bien, pero no puedo suscribirme a ese evento.

Saludos,

Andres Pinzon

Varios componentes se pueden "colgar" al mismo evento?

Everardo Sánchez

en vez de decir colgar, puedes decir "suscribir" (se escucha más pro XD), la respuesta es si :)

Abner Daniel Saavedra Farías

Esto lo entendí de la siguiente manera:

Con la comunicación entre componentes a través de eventos es posible comunicar un componente hijo con su componente padre mediante un evento definido el cual al ejecutarse a su vez llamará a una función que cambiará el comportamiento de una propiedad del componente padre.

Aporten correcciones, mejora u opiniones.

Por cierto Ignacio gracias por explicar tan bien.

David Antonio Garcia Saaib

Otra forma de verlo es que con los eventos se le avisa al padre que se presionó el boton de enviar, entonces el padre se encarga de enviar el dato, el hijo solo le dijo que ya estaba listo

Angel Cabrera

Cuando capturas un evento no es estrictamente necesario llamar a una función, puedes ejecutar codigo javascript inline o llamar varias funciones, etc:

<component
@change-color="color = #fff"
/>

<component
@change-color="updateParentColor; updateChildColor;"
/>

Mario Campos

Como sería la actualización desde el padre cuando se emita un evento desde un componente hijo que se debe actualizar cuando se tiene una colección el estilo:

..
persons : [
	{name : "name-1"},
	{name : "name-2"},
	{name : "name-3"}
]

Debes comunicarle al componente padre la posición del array que quieres modificar, junto al nuevo valor y con una función en el padre haces la modificación:

this.emit('change-name', { index: 2, name: 'Mario' }); v-on:change-name="persons.$set(event.index, {name: event.name})" o v-on:change-name="persons.splice(event.index, 1, {name: event.name})"

Jesus Manuel Hernandez Diaz

Brutal!

Jose L. Figueroa

Comunicación entre Componentes: Eventos

Para enviar información de un componente hijo a un componente padre es necesario enviar eventos.

Se debe de tener en cuenta que las propiedades que pertenecen al componente padre NUNCA deben ser actualizadas por el componente hijo; si se necesitara modificar alguna de éstas propiedades, el componente hijo tiene que modificar al padre, ésta notificación se realiza a través de eventos.

Se puede decir que la comunicación de padres hacia hijos es a través de Propiedades y la comunicación de hijos hacia padres es a través de Eventos, de ésta forma se mantiene la consistencia de cómo se utilizan las cosas en VueJS. V-bind se utiliza para modificar en tiempo real, o tener un atributo dinámico respecto a las propiedades y se utiliza la emisión de eventos con v-on para que el componente hijo pueda enviar información al componente padre.

$emit pertenece al Core de VueJS, se le indica al componente que emita un evento(En éste caso change-color) cada vez que se ejecuta el método(En éste caso el método toggleShowPrices).

methods: {
    toggleShowPrices () {
      this.showPrices = !this.showPrices

      this.$emit('change-color')
    }
},

Mientras tanto del lado del HTML se utiliza la directiva v-on para que escuche y así cache el evento(En éste caso change-color), solamente falta definir la función que se encargará de manejar el evento(En éste caso change-color).

<coin-detail 
      v-on:change-color="updateColor"
      v-bind:coin="btc"
></coin-detail>

Y en los métodos del componente padre:

updateColor () {
      this.color = this.color
        .split('')
        .reverse()
        .join('')
}

Cuando trabajamos con eventos, al emitir un evento es posible también emitir un valor que acompañe a ese evento. Para el ej. EN lugar de utilizar un reverse del color, se podría decirle al componente padre cuál es el color que tiene que utilizar.

this.$emit('change-color', 
        this.showPrices ? 'FF96C8' : '3D3D3D'
)

updateColor (color) {
      this.color = color || this.color
        .split('')
        .reverse()
        .join('')
}

Al utilizar componentes, es importante tener en cuenta que estos son fáciles de repetir o reutilizar a lo largo del código. Si se duplican los componentes, se tendrían varios componentes que tienen la misma funcionalidad, pero que son totalmente aislados, y por lo mismo es importante que la función que se tiene dentro de data devuelva un objeto, si en lugar de una función que devuelve un objeto, se tuviera un objeto, no seríamos capaces de mantener una referencia aislada para cada uno de los componentes. De ésta forma se garantiza que cada componente tiene su propio estado y que cuando se modifica el estado de un componente, no importando que sea el mismo tipo de componente, no se va a modificar el estado del otro.

Esneider Vélez Peña

Hola, necesito ayuda.

Tengo todo bien, idéntico al código de la clase pero cuando se cambia el valor de showPrices aparece en consola que color no está definido y por tanto no cambia el color del background, no entiendo que sucede.

Acá está el app.js:

y acá el html:

Cristhian De la Cruz

Una duda compañeros, si necesito llamar a más de un evento del componente padre ¿Tendria que colocar vario v-on?, por ejemplo:

Mi componente se llama: user-one, donde tengo que llamar a 2 eventos de mi componente padre.

Buenos días compañeros, teno una humilde duda: ¿cómo pasaría como parámetro el value seleccionado de la etiqueta select y así enviarlo al evento de mi componente padre y filtre por esa selección?, ya que lo intento y no me está filtrando y me trae todo como se observa:

    Vue.component('userOne', {
        props: ['estadoVenta'],
        data() {
            return {
                counter: 0,
                numeroDocumentoBusc: ''
            }
        },
        methods: {
            ListarVentaOne() {

                this.$emit('show-lists', this.estadoVenta);
            }
        },

Gracias.

Sergio Eduardo Olivo

Decidí separar el componente en un archivo propio, pero me manda un error, donde me pregunta si registré correctamente el componente, ¿Como se hace el registro de un componente?

Unknown custom element: <coin-detail> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Luis Daniel Mendoza Rodríguez

cuando lo pones en otro archivo debes exportarlo y debes ponerle la propiedad

var CoinDetail = Vue.component("tabla-proyectos", {})
export default CoinDetail ;
.....
}

Y en el componente donde lo vas a montar debes poner esto

import CoinDetail from './components/CoinDetail.js';

y ya lo puedes usar

Oscar Armando Del Angel Casillas

hay repositorio de este curso?

Jhonny Lincol Quispe Navarro

El repositorio esta en los recursos de la segunda clase, te dejo el link: https://platzi.com/clases/1752-vuejs/24553-el-framework-progresivo/

Introducción

Fundamentos de Vue: Componentes y Desarrollo de Aplicaciones Web

Vue.js: Desarrollo de Aplicaciones Web Profesionales

Creación de aplicaciones reactivas con Vue.js y HTML

Rendering Declarativo y Manipulación de DOM

Renderizado Declarativo en JavaScript: Estado y Vista Sincronizados

Uso de Expresiones JavaScript en Plantillas de Vue.js

Directivas para Atributos Dinámicos en HTML con Vue.js

Directivas de Renderizado Condicional en HTML con Vue.js

Uso de la Directiva v-for en Vue.js para Renderizar Listas

Manejo de Eventos en Vue.js: Click y Mouseover

Condiciones y Clases Dinámicas en Vue.js

Estilos Dinámicos en JavaScript: Cambios de Color Interactivos

Propiedades Computadas y Watchers en Vue.js

Interacción dinámica con formularios y directivas en Vue.js

"Crear un Tracker de Cursos con Vue.js"

Sistema de Componentes

Sistema de Componentes en Fren Word: Modularización y Reutilización

Creación de Componentes Personalizados en Vue.js

Comunicación entre Componentes en Vue.js: Props y Data Binding

Comunicación entre Componentes en Vue: Emisión y Manejo de Eventos

Uso de Slots para Inyectar HTML en Componentes Hijos

Ciclo de Vida de Componentes en Vue.js

Componentes de Vue: Creación y Gestión Eficiente

Componente Modal y Componente Principal en Vue.js

Ambiente de Desarrollo

Configuración Profesional de Vue.js con Visual Studio Code

Creación de Aplicaciones con Dios CLI y su Configuración Básica

Componentes de Archivo Único en Vue.js

Comandos esenciales para proyectos con Vue CLI y configuración de entorno

Platzi Exchange

Instalación y configuración de Tailwind CSS en proyectos HTML

Creación y Gestión de Componentes VUE en Proyectos Web

Creación de Aplicaciones SPA con Vue Router

Uso de Fetch API para Interactuar con Servidores HTTP

Filtros y Directivas para Mejorar Interfaces en JavaScript

Creación de Rutas Dinámicas en Vue.js para Criptomonedas

Navegación Dinámica y Programática en Vue.js

Integración de Componentes de Terceros en Proyectos Vue.js

Manejo de Problemas de Reactividad en Vue.js

Filtros y Ordenamiento en Tablas de Datos con JavaScript

Implementación de Rutas Dinámicas y Conversor de Criptomonedas en Vue.js

¡A producción!

Publicación de Aplicaciones con Git y Netlify

Rendering Declarativo y Manipulacion de DOM

Comunicación entre Componentes en Vue: Emisión y Manejo de Eventos