Comunicación de componentes Vue

Tengo dos componentes Vue: 

Vue.component('A', {});

Vue.component('B', {});

¿Cómo puedo acceder al componente A desde el componente B? ¿Cómo funciona la comunicación entre los componentes?

Author: 0_o, 2015-12-29
Source

4 answers

La comunicación entre componentes no recibe mucha atención en el SDV.js docs, ni hay muchos tutoriales que cubran este tema. Como los componentes deben estar aislados, nunca debe "acceder" a un componente directamente. Esto acoplaría firmemente los componentes juntos, y eso es exactamente lo que desea evitar hacer.

Javascript tiene un método excelente para la comunicación: eventos. Vue.js tiene un sistema de eventos incorporado, utilizado principalmente para la comunicación padre-hijo. De la docs:

Aunque puede acceder directamente a los hijos y padres de una instancia de Vue, es más conveniente usar el sistema de eventos integrado para la comunicación entre componentes. También hace que su código sea menos acoplado y más fácil de mantener. Una vez que se establece una relación padre-hijo, puede enviar y desencadenar eventos utilizando los métodos de instancia de evento de cada componente.

Su código de ejemplo para ilustrar el sistema de eventos: 

var parent = new Vue({
  template: '<div><child></child></div>',
  created: function () {
    this.$on('child-created', function (child) {
      console.log('new child created: ')
      console.log(child)
    })
  },
  components: {
    child: {
      created: function () {
        this.$dispatch('child-created', this)
      }
    }
  }
}).$mount()

Dan Holloran tiene recientemente escribió un artículo sobre su "lucha" con la mensajería de componentes cruzados, en dos piezas . Esto podría ser útil para usted si necesita comunicación entre componentes que no tienen relación padre-hijo.

Otro enfoque con el que tengo experiencia (aparte del uso de eventos para la comunicación), es el uso de un registro de componentes central que tiene una referencia a la API pública con una instancia de un componente vinculado a ella. El registro maneja las solicitudes de un componente y devuelve su API pública.

En el contexto del SDV.js, los eventos lo harían por mi arma de elección.

 27
Author: pesla,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-29 13:42:22

Además de la respuesta de pesla, eche un vistazo a la sección de Administración de Estado de la guía en la creación de aplicaciones a gran escala: http://vuejs.org/guide/application.html#State_Management . He creado un jsfiddle basado en eso aquí: https://jsfiddle.net/WarwickGrigg/xmpLg92c/.

Esta técnica también funciona para componentes: padre-hijo, relaciones de componentes hermano-hermano, etc.

var hub = {
  state: {
    message: 'Hello!'
  }
}

var vmA = new Vue({
    el: '#appA',
    data: {
      pState: {
        dA: "hello A" 
    },
    hubState: hub.state
  }
})

var vmB = new Vue({
    el: '#appB',
    data: {
      pState: {
        dB: "hello B"
    },
    hubState: hub.state
  }
})
 10
Author: Warwick,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-29 15:06:05

La comunicación entre los componentes también se puede establecer mediante la creación de un único centro de eventos global en su aplicación Vue. Algo como esto:-

var bus = new Vue();

Ahora puede crear eventos personalizados y escucharlos desde cualquier componente.

     // A.vue
    // ...
    doThis() {
        // do the job

        bus.$emit('done-this');
    }

    // B.vue
    // ...
       method:{
             foo: function()
          }
    created() {
        bus.$on('done-this', foo);
    }

Se puede encontrar más sobre esto en la documentación oficial..

 6
Author: 0_o,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-01 22:22:36

Es una buena práctica usar props y events.

Hay muchos ejemplos en línea, como:

Recomiendo algunas lecturas sobre el tema.

Si los componentes son hermanos y no tienen ninguna relación padre-hijo, podría valer la pena revisar la arquitectura de su aplicación.

  • Do A and B have a ¿relación de padres e hijos?
  • ¿Hay un componente C que sea posiblemente el padre de A y B?

Si A y B son hijos de C, considere usar accesorios y eventos. Otra forma es usar props y sync, que puede ser útil para los datos del formulario:

 2
Author: lukas_o,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-27 10:28:03