1

introducir la descripción de la imagen aquí

Tengo un problema con mi componente hijo(azul) y la comunicación al padre, debido al que el componente children tiene la herramientas de filtro de "mi tabla" necesito pasar los datos capturados al padre, que es el contenedor de mi tabla.

mi componente padre:

<template>
  <busqueda /> //color azul
  <table .../>

Componente hijo:

return {
          filter:{
          col: null,
           text: ''
        },
         orderBy: {
            col: null,
            type: 'asc'
         },
         total: 20
       }

he visto varias formas de hacerlo, sin embargo no se como retornar toda la información.

La mejor manera para mi seria que estuviera de la siguiente forma:

<busqueda :filterBy="modelo_1" :orderBy="modelo_2" />

y de esta manera ya tengo controlado cada uno de los <select> de busqueda. ¿Alguien sabe como puedo hacer eso?

1
  • Ojo, lo que pase como atributo del padre no puede ser modificado por el hijo. (Son props y no pueden ir en data del hijo).
    – ffflabs
    Commented el 13 nov. 2019 a las 12:05

1 respuesta 1

6

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. 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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.