Vue des composants de communication

De la croix-composant de communication ne reçoit pas beaucoup d'attention dans les Vue.js docs, ni qu'il existe de nombreux tutoriels qui traitent de ce sujet. En tant que composants doivent être isolés, vous ne devriez jamais "l'accès" à 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 pour la communication, l'événementiel. Vue.js intégré dans le système d'événements, principalement utilisé pour la communication parent-enfant. À partir de la documentation:

Bien que vous pouvez accéder directement à la Vue de l'occurrence les enfants et les parents, il est plus commode d'utiliser la fonction intégrée dans le système d'événements de la croix-composant de communication. Il rend également votre code moins couplée et plus facile à maintenir. Une fois qu'une relation parent-enfant est établie, vous pouvez envoyer et de déclencher des événements à l'aide de chaque composant de l'événement méthodes d'instance.

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

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 son "combat" avec la croix-composant de messagerie, dans deux pièces. Cela peut être utile pour vous, si vous avez besoin de communication entre les composants qui n'ont pas de relation parent-enfant.

Une autre approche que j'ai de l'expérience avec les (autres qu'à l'aide d'événements pour la communication), est à l'aide d'un élément central de registre qui a une référence à l'API publique avec une instance d'un composant lié à elle. Le registre gère les demandes pour un composant et retourne son API publique.

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

La Communication entre les composants peuvent aussi être établis par la création d'un seul événement mondial hub dans votre Vue de l'application. Quelque chose comme ceci:-

var bus = new Vue();

Maintenant, vous pouvez créer des événements personnalisés et de les écouter sur n'importe quel composant.

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

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

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

Plus à ce sujet peut être trouvé à partir de la documentation officielle..

Pour les frères et sœurs de la communication, j'ai trouvé à l'aide de la mère comme un événement de bus fait la logique relativement trivial. À l'aide de $root comme un événement de bus signifiait code supplémentaire pour vérifier la portée de composants qui peuvent ne pas être directe, les frères et sœurs. À l'aide de la $parent signifie que la portée des événements de rayonnement peut être contrôlée.

L'exemple suivant est un TableHeader composant. Quand vous cliquez dessus, re-commandes les données dans un tableau, d'autres en-têtes ne sont plus actifs et ne doit pas être affiché en tant que tel, d'une propriété calculée cssClass est utilisé pour cela.

export default {
    name: 'TableHeader',
    props: ['sort'],
    data() {
        return {
            direction: this.sort
        }
    },
    computed: {
        cssClass() {
            if (this.direction === 'none') return '';
            return (this.direction === 'descending') ? 'headerSortUp': 'headerSortDown';
        }
    },
    methods: {
        clickHeader(event) {
            this.direction = (this.direction === 'none' || this.direction === 'descending') ? 'ascending' : 'descending';

            //We use the parent as an event bus
            this.$parent.$emit('TableHeader:sortChanged', this);
        },
        sortChanged(element) {
            //Dont reset if this is the emitter         
            if (this === element) return; 

            this.direction = 'none';
        }
    },      
    created() {
        this.$parent.$on('TableHeader:sortChanged', this.sortChanged);
    },
    beforeDestroy: function () {
        this.$parent.$off('TableHeader:sortChanged', this.sortChanged)
    }
}