1

Como puedo modificar los datos de un componente desde otro componente "lejano"?, cuento con la siguiente estructura:

Principal
   importa a secundario_1
       importa a secundario_2
           importa a secundario_3
           | secundario_3 debe modificar datos de Capa
Capa    <---

Solo quiero modificar el valor de abc de Capa desde secundario_3

data:() => ({
    abc: 'hola mundo'
})

Intente con async y $emit pero solo me funciona entre padre e hijo. Gracias

1 respuesta 1

1

Puedes utilizar un EventBus que te ayuda a interactuar entre componentes.
Lo que se hace es crear una nueva instancia de Vue que será utilizada solamente para emitir eventos y recibir esos eventos desde cualquier otro componente.

event-bus.js

import Vue from 'vue';
export const EventBus = new Vue();

En tu secundario_3 lo importas:

import { EventBus } from "./event-bus.js";

y emites un evento así:

EventBus.$emit("modificarDatos", "CAMBIO");

Luego en tu Capa recibes ese evento:

EventBus.$on("modificarDatos", cambios => {
  console.log("Recibido desde secundario_3", cambios);
  this.abc = cambios;
});

Te dejo el código completo

Espero te sirva!

1
  • tambien podria usar vuex, o tambien podria levantar un evento en el hijo que levante un evento en su padre y asi hasta llegar a la capa que quiere. Por favor, mira Cómo responder, un comentario y un link se consideran una respuesta de baja calidad
    – gbianchi
    Commented el 14 ago. 2020 a las 14:51

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.