Skip to main content
se añadieron 125 caracteres en el cuerpo
Origen Enlace
ffflabs
  • 23k
  • 28
  • 50

No voy a ahondar en los métodos terribles, pero he visto usar vuex para este caso de uso... sólo porque el desarrollador era fan de vuex. También solía ser común generar una instancia vacía de Vue y usarlo como bus de eventos desde y hacia todos los componentes.

No voy a ahondar en los métodos terribles, pero he visto usar vuex para este caso de uso... sólo porque el desarrollador era fan de vuex.

No voy a ahondar en los métodos terribles, pero he visto usar vuex para este caso de uso... sólo porque el desarrollador era fan de vuex. También solía ser común generar una instancia vacía de Vue y usarlo como bus de eventos desde y hacia todos los componentes.

Origen Enlace
ffflabs
  • 23k
  • 28
  • 50

Hay dos maneras sanas de hacerlo y como 200 maneras terribles. De las primeras:

1.- Escuchar a un evento del hijo:

en el padre:

<template>
  <busqueda v-on:tengo_resultados="onResultados">
</template>
<script>
 export default {
   components:{Busqueda}
   methods: {
      onResultados(datos) {
       ...hago algo con ellos...
      }
   }
 }
</script>

en el hijo

export default {
   methods: {
      async buscarDatos(parametros) {
         let datos = await axios.get(...);
         this.$emit('tengo_resultados', datos);
      }
   }
 }

Básicamente, el primer parámetro que le pasas a $emit ('tengo_resultados') es el nombre del evento que el padre escucha. El segundo parámetro (datos) será lo que reciba la función con que el padre reaccionará al evento del hijo.

2.- Pasarle una función "callBack" al hijo

Si lo primero era como llevar a tu hijo hijo al parque y vigilarlo para que, si se cae, reaccionar.

Por la contraparte, pasarle una función es como pasarle un walkie-talkie al niño y decirle: "cuando te caigas, llámame". Lo encuentro más elegante.

en el padre:

<template>
  <busqueda :avisar="onResultados">
</template>
<script>
 export default {
   components:{Busqueda}
   methods: {
      onResultados(datos) {
       ...hago algo con ellos...
      }
   }
 }
</script>

En el padre se ve casi igual, pero ahora el hijo debe invocar la función que recibe como prop

export default {
   props: ['avisar'],
   methods: {
      async buscarDatos(parametros) {
         let datos = await axios.get(...);
         this.avisar(datos);
      }
   }
 }

Nótese que el hijo no tiene idea de cómo se llama el listener del padre. Él sólo sabe llamar a "avisar".

Por convención, recuerda que estos métodos pasan de kebab-case a camelCase

Dejo un ejemplo de ambos approach

Vue.component('hijoMenor', {
  template: `<span style="float:left;">
   <button v-on:click="gritar">
    Click: se cae mi hijo menor
   </button>
  </span>`,
  methods: {
    gritar: function() {
      this.$emit('se_cae', 'hijo menor')
    }
  }
});
Vue.component('hijoMayor', {
  template: `<span style="float:right">
   <button v-on:click="llamar">
      Click: se cae mi hijo mayor
   </button>
  </span>`,
  props: ['cuandoSeCaiga'],
  methods: {
    llamar: function() {
      this.cuandoSeCaiga('hijo mayor')
    }
  }
});

var vm = new Vue({
  el: '#app',

  data: function() {
    return {

      mensaje: 'Llevé a mis hijos a la plaza'
    }
  },
  methods: {
    TengoQueLevantarlo: function(cual) {
      this.mensaje = ('Escuché que se cayó mi ' + cual + ', Tengo que levantarlo');
    },
    MeAvisaPorRadio: function(cual) {
      this.mensaje = ('Me acaba de llamar mi ' + cual + ' para avisarme que se cayó');
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    {{mensaje}}
  </div>


  <br>

  <hijo-menor v-on:se_cae="TengoQueLevantarlo"></hijo-menor>
  <hijo-mayor :cuando-se-caiga="MeAvisaPorRadio"></hijo-mayor>
</div>

No voy a ahondar en los métodos terribles, pero he visto usar vuex para este caso de uso... sólo porque el desarrollador era fan de vuex.