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.