TransWikia.com

¿Cómo pasar valores entre componentes Vue hermanos sin usar 'params'?

Stack Overflow en español Asked by Gibrán on December 7, 2020

Actualmente cuento con 2 componentes:

  • Proyectos.vue
  • Reuniones.vue

Donde:

  • Proyectos: es el componente que muestro de inicio donde se muestra el
    listado de proyectos.

  • Reuniones: es el componente donde se muestra el listado de reuniones
    de un proyecto.

En el componente Proyectos hago una solicitud GET la cual me retorna un arreglo de objetos, es decir proyectos. Este listado de proyectos lo lleno en una tabla.

Estructura objeto Proyecto:

    {
        objetivo:"", 
        fecha: "",
        reuniones: [
        {
            titulo: "",
            fecha: ""
        },
        {
            titulo: "",
            fecha: ""
       }]
   }

Por cada renglón de tabla tengo un objeto javascript proyecto el cual deseo enviar al componente Reuniones al hacer clic en un botón. Una vez en el componente Reuniones haré ciertas acciones con ese objeto.

Flujo esperado

Decisión de no utilizar params

Estoy buscando la forma de no tener que mandar el Id por la url y tener que hacer un nuevo get del objeto. Quiero utilizar el objeto con el que ya cuento desde el componente Proyectos.

Intento de uso de eventos

Traté de utilizar eventos mediante $emit y $on pero como el componente Reuniones todavía no está cargado no puede escuchar del evento que envío desde el componente Proyectos.

Proyectos.vue:

proyectoSeleccionado (proyecto) {
    // Emito un evento con el objeto proyecto
    this.$root.$emit('enviar', proyecto)
    // Mando llamar la ruta 'reuniones', misma que cargar el controlador reuniones
    this.$router.push('reuniones')
}

Reuniones

this.$root.$on('enviar', (data) => {
    console.log(data)
})

En comportamiento que estoy buscando es poder utilizar un objeto entre componentes.

One Answer

Si haces un cambio de ruta, se pierde el estado, a menos que uses Vuex para almacenar ese objeto en el store y poder compartirlo..

Pero, si el componente que recibe el objeto wrappea el componente reuniones y no es destruido, podés pasarlo como prop o instalar plugin vue-events que es más fácil de entender que los eventos que vienen por defecto en Vue...

Answered by Walter Cejas on December 7, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP