A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Comunicaci贸n entre Componentes: eventos

18/38
Recursos

Aportes 32

Preguntas 8

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

HOLA! Vengo del futuro! presten atenci贸n a esta clase. La van a necesitar para quitar la visibilidad un modal hijo enviando el estado al dom padre.

Ac谩 les dejo documentaci贸n para que amplien este concepto:

https://es.vuejs.org/v2/guide/components.html#Enviando-mensajes-a-componentes-padre-con-eventos

Suerte!

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.

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(鈥榗hange-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=鈥漸pdateColor 鈥 (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(鈥榗hange-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 鈥榝f96C8鈥 (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>

        - 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

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.

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.

Con esta clase se me viene unas ideas para hacer un Dark Theme 馃槃 de una p谩gina

el final -> 馃く

Resumen de la clase

$emit('functionName','Paremeter')

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.

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.

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"}
]

Consejo:

No usen camelCase para definir el nombre del evento a emitir. La sintaxis correcta para definir el nombre del evento es kebab-case. De lo contrario no importa que uses en tu HTML, el evento no se emite.

En esta clase lo que vamos hacer es que el componente hijo emita un evento para avisarle al componente padre que tiene que actualizar ese valor

Comunicaci贸n entre padres a hijos es a trav茅s de propiedades
Comunicaci贸n entre hijos a padres es a trav茅s de eventos

Alg煤n viajero que ya haya visto el curso y est茅 pasando nuevamente por ac谩 sabe si en alg煤n momento del curso se utiliza algo parecido a un bot贸n que agregue din谩micamente un formulario? O sabe si con lo visto hasta ahora se podr铆a hacer? Le vengo dando vueltas y no me sale. Si alguien est谩 dispuesto a darme una mano me vendr铆a genial.

Comunicaci贸n entre Componentes: eventos

Las propiedades que pertenecen al componente padre nunca deben ser actuliazadas por el componete hijo. El hijo debe notificar al padre con eventos.

Podemos decir que la comunicaci贸n de padre a hijo es a trav茅s de propiedades y de hijo a padre es a trav茅s de eventos.

Eventos personalizados con $emit

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Primera Vue</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div
    id="app"
    v-bind:style="{ background: '#' + color }">

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

  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src="app.js"></script>
</body>
</html>
Vue.component('coinDetail', {
  props: ['coin'], //*Pertenecen al componente 'padre'
  data() {
    return {
      showPrices: false,
      value: 0,
    }
  },
  methods: {
    toggleShowPrices() {
      this.showPrices = !this.showPrices

      this.$emit('change-color',
      this.showPrices ? 'FF96C8' : '3D3D3D') //*Segundo parametro es el color que tiene que utilizar el componente padre
    }
  },
  computed: {
    title () {
      return `${this.coin.name} - ${this.coin.symbol}`
    },

    convertedValue () {
      if(!this.value){
        return 0
      }
      return this.value / this.coin.price
    }
  },
  template: `
    <div>
      <img
        v-on:mouseover="toggleShowPrices"
        v-on:mouseout="toggleShowPrices"
        v-bind:src="coin.img"
        v-bind:alt="coin.name"
      >

      <h1
        v-bind:class="coin.changePercent > 0 ? 'green' : 'red'">
        {{ title }}
        <span v-if="coin.changePercent > 0">馃</span>
        <span v-else>馃く</span>
        <button v-on:click="toggleShowPrices">
          {{ showPrices? '馃檲' : '馃惖' }}
        </button>
      </h1>

      <input type="number" v-model="value">
      <span>{{ convertedValue }}</span>

      <ul v-show="showPrices">
        <li
          class="uppercase"
          v-bind:class="{
            green: p.value > coin.price,
            orange: p.value === coin.price,
            red: p.value < coin.price,
          }"
          v-for="(p, index) in coin.pricesWithDays"
          v-bind:key="p.day">
          {{ index }} - {{ p.day }} - {{ p.value }}
        </li>
      </ul>
    </div>
  `
})

new Vue({
  el: '#app',

  data() {
    return {
      btc: {
        name: 'Bitcoin',
        symbol: 'BTC',
        img: 'https://cryptologos.cc/logos/bitcoin-btc-logo.png',
        changePercent: 10,
        price: 8400,
        pricesWithDays: [
          { day: 'Lunes', value: 8400 },
          { day: 'Martes', value: 7900 },
          { day: 'Miercoles', value: 8200 },
          { day: 'Jueves', value: 9000 },
          { day: 'Viernes', value: 9400 },
          { day: 'Sabado', value: 10000 },
          { day: 'Domingo', value: 10200 },
        ],
      },
      color: 'f4f4f4',
    }
  },

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

18.-Comunicaci贸n entre Componentes: eventos

Para mandar informaci贸n de componente hijo a padre enviamos eventos, es importante tener en cuenta que las propiedades que pertenecen al componente padre NUNCA deben ser actualizadas por el hijo, en caso de que tengan que ser actualizadas el hijo debe notificar al padre, esta notificaci贸n se hace a trav茅s de eventos.

Padres 鈫 Hijos: Propiedades.

Hijos 鈫 Padres: Eventos.

Es importante que la funci贸n dentro de data sea una que devuelve un objeto, si solo fuera un objeto no podr铆amos mantener aislados cada uno de los componentes, as铆 se garantiza que cada componente tiene su propio estado.

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

muy buena clases

Brutal!

Hola
Cual es el repositorio github del curso?

woooow! me impresiona mucho este framework.

nota: la comunicacion de padres hacia hijos es a traves de propiedades y de hijos hacia padre es a traves de eventos

super clase, excelente profe

tengo un problema me marca error en consola y No me muestra nada en el navegador,
" InvalidCharacterError: String contains an invalid character"

En mi laboratorio, intent茅 hacer un emit sin nomenclatura kebab hice lo adjunt茅 bien todo pero no anduvo. No fue hasta que puse el naming en kebab que ahi comenz贸 a funcionar el emit.

Para la comunicaci贸n de hijos a padres se usan eventos que podemos usar a trav茅s de v-on, y podemos repetir los componentes tantas veces queramos.

De hecho lo incre铆ble es que si nos copiamos el c贸digo del componente y nos los llevamos a cualquier otro proyecto, va a seguir funcionando exactamente igual, mientras tenga Vue enlazado.

Con los props podemos enviar informaci贸n de un componente padre a un componente hijo. Para hacerlo al rev茅s, de hijo a padre, se usan los eventos.

Las propiedades que pertenecen al componente padre nunca deben ser modificadas por el hijo

En caso de que alguna propiedad se tenga que modificar, el componente hijo le notificar谩 al padre que una propiedad debe ser actualizada mediante un evento.

Para enviar un evento se utiliza la funci贸n emit.

Para que el elemento padre reciba el evento tenemos que usar la directiva v-on en el elemento hijo y asignarle la funci贸n que estar谩 en el elemento padre.

Una ventaja de utilizar componentes es que lo podemos repetir a lo largo de la aplicaci贸n de forma f谩cil usando la etiqueta en el HTML que lo necesitemos. Cada componente es independiente de los otros.

馃憣

Compa帽eros sabios, vengo de js puro y siempre he considerado poner eventos en las etiquetas como una mala practica, por ejemplo esto ==>

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

pasar el parametro msg a el TAG 鈥楬elloWorld鈥 驴esta bien? o 驴cual seria una buena practica?

Hola Devs:
-Muy importante concepto:
"El padre siempre se comunicara con el hijo mediante propiedades y el hijo mediante eventos