No veo para qué usas el bus
si en el componente hijo no lo estás usando.
Si en el componente padre tienes:
data() {
heroes:['heroe1','heroe2'];
}
Podrías usar el componente hijo dentro de los componentes del padre:
<template>
<ver-heroes :heroes=heroes></ver-heroes>;
</template>
import verHeroes from 'verHeroes.vue';
export default {
name: 'Heroes',
components:[verHeroes],
heroes:['heroe1','heroe2'];
}
Cuando en el componente padre instancias el componente hijo pasándole la propiedad heroes
del padre: <ver-heroes :heroes=heroes></ver-heroes>
Puedes usarla si el hijo la tiene entre sus props
definiéndolo como:
<template>
<p>{{identificador}}</p>
<div v-for="heroe in heroes">
{{heroe}}
</div>
<template>
export default {
name:'verHeroes',
props:['heroes'],
data() {
identificador: this.$route.params.id;
}
}
O bien si lo que quieres es obtener un solo héroe desde el padre, declarar get_heroe
en el hijo:
<template>
<p>{{identificador}}</p>
<div>
{{get_heroe(identificador)}}
</div>
<template>
export default {
name:'verHeroes',
props:['heroes'],
data() {
identificador: this.$route.params.id;
}
methods: {
get_heroe(valor) {
return this->heroes[valor];
}
}
}
Recibir un prop
del padre te permite usarlo en el hijo como si fuera parte de su data
, con la salvedad que no puedes modificarlo.
En tu pregunta no queda claro lo que quieres hacer, así que es mi mejor suposición. ConLo importante es que, con eso que te mostré, el padre puede pasarle al hijo las props
que quieras, y el hijo puede usar un método del padre o acceder a una propiedad del padre. como si fuera propia.
Si realmente necesitas usar el bus por otra razón, tendrías que definir en el hijo un watcher para detectar cambios en el bus y reaccionar ante ese cambio actualizando algo en el hijo. Pero eso no tengo cómo adivinarlo.