Image Principale

Un bus de communication pour VueJS


Dans ce court article, nous allons découvrir comment faire communiquer des composants entre eux grâce à un bus de communication commun.

Contact Person Mathieu Marteau
il y a 4 mois

Lorsqu'on utilise VueJS ou tout autre framework javascript comme React ou Angular, on rencontre parfois des problèmes lorsqu'il s'agit de faire communiquer plusieurs composants. On peut aborder le problème de plusieurs manières. On peut suivre une architecture de type flux en utilisant vuex par exemple qui permet d'avoir ce qui ressemble à des variables globales dans toute l'application. On utilise alors ce que l'on appelle un store. On peut donc ensuite théoriquement faire communiquer les composants en fonction de l'état (state) de ce store.

Dans notre cas, on va plutôt utiliser les événements Vue JS. De base, avec VueJS, on peut émettre des événements à un composant parent en utilisant $emit.

<template>
    <div>
        <button @click="doSomething()">Emit Event</button>
    </div>
</template>

<script>
    export default {
        methods: {
            doSomething () {
                this.$emit('input')
            }
        }
    }
</script>

On pourra alors récupérer l'événement dans le composant parent de la façon suivante:

<template>
    <div>
        <some-component @input="handleEvent()"></some-component>
    </div>
</template>

<script>
    import SomeComponent from './SomeComponent.vue'

    export default {
        methods: {
            handleEvent () {
                console.log('I am handling the event')
            }
        },
        components: {
            SomeComponent
        }
    }
</script>

Comme vous le voyez, dans le composant parent, on écoute sur l'événement input en écrivant @input="handleEvent()".

Création d'un bus de communication

Mais avec cette technique, on ne peut que communiquer au composant parent, et pas à d'autres composants de même niveau ni à des composants enfants. Pour cela, on va donc créer une instance de Vue indépendante uniquement dédiée à la réception et à l'émission d'événements.

Pour cela, on créé donc une nouvelle instance dans un nouveau fichier que l'on peut appeler Bus.js par exemple:

import Vue from 'vue'

export default new Vue()

Ce fichier est aussi simple que ça, on créé juste une nouvelle instance de Vue.

Pour l'utiliser dans un composant, il nous faudra donc importer cette instance, et jouer avec:

import Bus from './Bus.js'

export default {

}

Pour émettre des événements sur ce bus, on utilisera également notre méthode $emit que nous utiliserons directement sur notre nouvelle instance:

import Bus from './Bus.js'

export default {
    created () {
        Bus.$emit('some-event')
    }
}

De la même façon, dans un autre composant (ou dans le même si vous le souhaitez), il nous faudra écouter sur cet événement en utilisant cette fois la méthode $on:

import Bus from './Bus.js'

export default {
    created () {
        Bus.$on('some-event', () => {
            console.log('handling the event')
        })
    }
}

C'est aussi simple que ça!