Communication des composants Vue.js

Comment vous pouvez faire communiquer les composants dans une application Vue.js.


Les composants de Vue peuvent communiquer de différentes manières.

Accessoires

La première consiste à utiliseraccessoires.

Les parents «transmettent» les données en ajoutant des arguments à la déclaration du composant:

<template>
  <div>
    <Car color="green" />
  </div>
</template>

<script> import Car from ‘./components/Car’

export default { name: ‘App’, components: { Car } } </script>

Les accessoires sont à sens unique: du parent à l'enfant. Chaque fois que le parent modifie l'accessoire, la nouvelle valeur est envoyée à l'enfant et renvoyée.

L'inverse n'est pas vrai et vous ne devez jamais muter un accessoire à l'intérieur du composant enfant.

Utiliser les événements pour communiquer des enfants aux parents

Les événements vous permettent de communiquer des enfants au parent:

<script>
export default {
  name: 'Car',
  methods: {
    handleClick: function() {
      this.$emit('clickedSomething')
    }
  }
}
</script>

Le parent peut intercepter cela en utilisant lev-ondirective lors de l'inclusion du composant dans son modèle:

<template>
  <div>
    <Car v-on:clickedSomething="handleClickInParent" />
    <!-- or -->
    <Car @clickedSomething="handleClickInParent" />
  </div>
</template>

<script> export default { name: ‘App’, methods: { handleClickInParent: function() { //… } } } </script>

Vous pouvez bien sûr passer des paramètres:

<script>
export default {
  name: 'Car',
  methods: {
    handleClick: function() {
      this.$emit('clickedSomething', param1, param2)
    }
  }
}
</script>

et récupérez-les du parent:

<template>
  <div>
    <Car v-on:clickedSomething="handleClickInParent" />
    <!-- or -->
    <Car @clickedSomething="handleClickInParent" />
  </div>
</template>

<script> export default { name: ‘App’, methods: { handleClickInParent: function(param1, param2) { //… } } } </script>

Utilisation d'un bus d'événements pour communiquer entre n'importe quel composant

En utilisant des événements, vous n'êtes pas limité aux relations enfants-parents.

Vous pouvez utiliser le soi-disantBus événementiel.

Au-dessus, nous avons utiliséthis.$emitpour émettre un événement sur l'instance de composant.

Ce que nous pouvons faire à la place est d'émettre l'événement sur un composant plus généralement accessible.

this.$root, le composant racine, est couramment utilisé pour cela.

Vous pouvez également créer un composant Vue dédié à ce travail et l'importer là où vous en avez besoin.

<script>
export default {
  name: 'Car',
  methods: {
    handleClick: function() {
      this.$root.$emit('clickedSomething')
    }
  }
}
</script>

Tout autre composant peut écouter cet événement. Vous pouvez le faire dans lemountedrappeler:

<script>
export default {
  name: 'App',
  mounted() {
    this.$root.$on('clickedSomething', () => {
      //...
    })
  }
}
</script>

Des alternatives

C'est ce que Vue fournit hors de la boîte.

Lorsque vous devenez trop grand, vous pouvez vous pencher surVuexou d'autres bibliothèques tierces.

Téléchargez mon gratuitManuel de Vue


Plus de tutoriels vue: