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.