No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Comunicaci贸n de componente hijo a padre

18/23
Recursos

Aportes 10

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

En el curso profesional de VUE, el viejo, hay una clase que se llama el event bus鈥 es muy interesante. Hay forma de emitir eventos a componentes que no estan relacionados directamente鈥 hermanos, abuelos鈥 etc. Con props y emits tocar铆a hacer toda una culebra de props y eventos. Con esta clase que les digo aprendemos una forma genial para que esto no pase. Lo he provado en VUE 2.x, no el 3.x

Lo que pas贸 con el m茅todo que no funcionaba la reactividad es que Vue envuelve los m茅todos de mutaci贸n de una matriz observada para que tambi茅n activen las actualizaciones de vista.
.
Los m茅todos envueltos son: push(), pop(), shift(), unshift(), splice(), sort(), reverse(). Si uso filter() entonces debo volver a asignarlo ya que filter no es mutable, as铆 como lo hizo la profesora:

this.numbers = this.numbers.filter((el, index) => index !== i);

O as铆:

const items = this.numbers.filter((el, index) => index !== i);
this.numbers = items;

S铆 quieres algo m谩s sencillo es recomendable usar los m茅todos que sugiere Vue:

remove(i) {
this.numbers.splice(i, 1);
}

En el componente hijo tambi茅n se puede ejecutar el emit directamente en el evento, para evitar crear la funci贸n rm:

template: `
	<li @click="$emit('remove')">
		{{ text }}
	</li>`

Resumen

Para comunicar que paso dentro del componente hijo al padre, se lo hace saber mediante el disparo de eventos, los cuales son personalizados por nosotros

  1. Se escucha un evento en el componente hijo, el cual termina por disparar un m茅todo.
  2. Dicho m茅todo dispara otro evento, pero esta vez sera escuchado a nivel jerarquico del componente padre.
  3. Ese evento que escucho el padre procede a disparar mas funcionalidades ya se si es simple o no
// Dentro del componente padre
<v-component v-on:eventoProvenienteHijo="metodo">
//  Dentro del componente hijo
<button
     v-on:click="metodoQueDIsparaEvento">
	Delete
</button>


// Methods del hijo
metodoQueDisparaEvento () {
	this.$emit("eventoProvenienteDelHijo", dataOpcional)
} 

A mi me funcion贸 lo siguiente:

remove(index){
	this.items.splice(index, 1);
},

C贸mo no poder decirle que no se elimin贸 el elemento 2 solo porque puso

this.item = 鈥

En lugar de

this.itemS

驴C贸mo funciona this.$emit?

En estos cursos recientes ser铆a bastante bueno que al final se aplicara lo aprendido construyendo un proyecto.
Me parece bastante completo, as铆 como se ven铆a haciendo en los cursos antiguos de Vue.js

Yo quise que en una lista de n煤meros, el n煤mero al que le hagas click se convierta en su valor cuadrado:

const app = Vue.createApp({
      el: '#app',

      data() {
        return {
          items: [ 1,2,3,4,5,6,7,8,9,10 ]
        }
      },

      template: `
        <ul>
          <v-item
            v-for="item, index in items"
            v-bind:number="item"
            v-on:click="square(item)"
            :key="index"
          >
            {{ item }}
          </v-item>
        </ul>
      `,

      methods: {
        square(i) {
          console.log(i)
          this.items[i-1] = i * i
        }
      },
    })

    app.component('v-item', {
      props: {
        number: Number
      },
      template: `<li>{{ number }}</li>`
    })

    const vm = app.mount('#app')

Comunicaci贸n hijos a padres.

El flujo de comunicaci贸n de hijo a padre es un poco m谩s complejo primero el componente debe recibir un evento 鈥渃ustom鈥, es decir un evento que no sea nativo de HTML, podemos simplemente nombrarlo como la funci贸n que queremos que ejecute, despu茅s a este evento le asignaremos la funci贸n a ejecutar como en el siguiente ejemplo:

 const app = Vue.createApp({
      data(){
        return{
          items:["uno", "dos", "tres"]
        };
      },
      methods: {
        remove(i){
           this.items = this.items.filter((el, index) => index !== i );
        }
      },
      template: `
        <ul>
            <v-item 
              v-for="(item, i) in items" 
              v-bind:key="i" 
              v-bind:text="item"
              v-on:remove="remove(i)" />
        </ul>
      `

En este ejemplo el componente esta recibiendo un 鈥渃ustom event鈥 llamado v-on:remove este tiene por asignado el m茅todo remove(i) que se defini贸 en el objeto de configuraci贸n del componente ra铆z. por dentro del componente v-item tiene lo siguiente:


    app.component('v-item',{
      props:{
        text: String
      },
      methods:{
        rm(){
          this.$emit("remove");
        }
      },
      template: `<li v-on:click="rm" >{{ text }}</li>`
    });

    const vm = app.mount("#app");

Ahora dentro del templarte tenemos un evento nativo v-on:click que dispara una funci贸n, en este caso rm , definimos rm en bloque de los m茅todos y al ejecutarlo usamos la funci贸n $emit() esta funci贸n es la importante, $emit emitir谩 un mensaje y recibe dos par谩metros,.

El primero ser谩 el nombre de la funci贸n que buscamos que se ejecute, es como si el hijo le dijera a su padre que funci贸n debe ejecutar, esta funci贸n por lo tanto ejecutar谩 el m茅todo remove que ya se defini贸 previamente.

el segundo par谩metro es un valor, este valor puede ser de cualquier tipo, lo importante es que debe ser el primer argumento que reciba una funci贸n definida previamente en los m茅todos del componente ra铆z.