Home / Questions / 381559
Accepted
qwerty
Asked: 2020-08-13 15:57:25 +0800 CST 2020-08-13 15:57:25 +0800 CST

How to modify "far" component data in Vue

  • 772

How can I modify the data of a component from another "distant" component? I have the following structure:

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

I just want to modify the abcLayer value from child_3

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

I tried with asyncand $emitbut it only works for me between parent and child. Thank you

vue.js

1 Answers

  1. Best Answer

    You can use a EventBuswhich helps you to interact between components.
    What is done is to create a new instance of Vue that will be used only to emit events and receive those events from any other component.

    event-bus.js

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

    In your child_3 you import it:

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

    and you emit an event like this:

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

    Then in your Cloak you receive that event:

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

    I leave you the complete code

    I hope it helps you!

    • 1