0

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Hola Buenos días, mi pregunta es la siguiente, tengo un componente Heroes.vue que es donde tengo mi array de Heroes y luego otro componete verHeroes.vue donde atrapo el identificador del Heroe por rutas, en este verHeroe.vue deseo llamar al método de getHeroes que esta en el primer componte para que me devuelva toda la informacion. No puedo pegar el codigo, por eso os paso imagenes. Alguna idea, soy nueva en Vue. Gracias

1
  • por favor, colocar código en lugar de imágenes...
    – fredyfx
    Commented el 10 jul. 2018 a las 3:49

1 respuesta 1

1

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

2
  • La explicación eta muy bien gracias, pero mi idea era que en héroes se imprimieran todos los heroes y cuando le diera al boton detalle, en verHeroe.vue se impriera solo ese Heroe, sin padre y sin hijo no se si los componentes se pueden relacionar, <ver-heroes :heroes=heroes></ver-heroes> , esto es obligatorio para pasar datoso solo el prop?
    – beaag58
    Commented el 9 jul. 2018 a las 12:53
  • Es una manera expedita de pasar propiedades, datos o métodos del padre al hijo. Combinando las dos opciones que te di puedes meter get_heroes en el bucle donde imprime todos los héroes. Por ejemplo si en el padre, heroes fuera un array de objetos con más detalles.
    – ffflabs
    Commented el 9 jul. 2018 a las 12:59

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.