Communication des composants

j'ai deux Vue des composants:

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

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

Comment puis-je accéder au composant A à partir du composant B? Comment fonctionne la communication entre les composants?

24
demandé sur 0_o 2015-12-29 13:28:01

4 réponses

La communication entre les composantes ne reçoit pas beaucoup d'attention dans l'Evi.js docs, ni qu'il existe de nombreux tutoriels qui traitent de ce sujet. Comme les composants doivent être isolés, vous ne devez jamais "accéder" à un composant directement. Cela permettrait d'associer étroitement l'ensemble des composants, et c'est exactement ce que vous voulez éviter.

Javascript a une excellente méthode de communication: les événements. Vue.js a un système d'événements intégré, principalement utilisé pour la communication parent-enfant. à Partir de la docs:

bien que vous puissiez accéder directement aux enfants et aux parents d'une instance de Vue, il est plus pratique d'utiliser le système d'événement intégré pour la communication entre les composants. Il rend également votre code moins couplé et plus facile à maintenir. Une fois qu'une relation parent-enfant est établie, vous pouvez envoyer et déclencher des événements en utilisant les méthodes d'instance d'événements de chaque composant.

Leur code d'exemple pour illustrer l'événement système:

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 a récemment écrit un article sur sa "lutte" avec des messages à composantes croisées, en deuxpièces. Cela pourrait vous être utile si vous avez besoin de communication entre des éléments qui n'ont pas de relation parent-enfant.

une autre approche avec laquelle j'ai de l'expérience (autre que l'utilisation d'événements pour la communication), est d'utiliser un registre central de composants qui a une référence à L'API publique avec une instance de composant lié à elle. Le registre traite les requêtes pour un composant et renvoie son API publique.

dans le contexte de Vue.js, les événements par mon arme de choix.

27
répondu pesla 2015-12-29 13:42:22