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.