Comment vous pouvez faire communiquer les composants dans une application Vue.js.
- Accessoires
- Événements à communiquer des enfants aux parents
- Utilisation d'un bus d'événements pour communiquer entre n'importe quel composant
- Des alternatives
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-on
directive 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.$emit
pour é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 lemounted
rappeler:
<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:
- Un aperçu de Vue.js
- La CLI Vue.js: apprenez à l'utiliser
- Les DevTools Vue.js
- Configurer VS Code pour le développement Vue
- Créez votre première application avec Vue.js
- Composants de fichier unique Vue.js
- Modèles et interpolations Vue.js
- Directives Vue.js
- Méthodes Vue.js
- Propriétés calculées Vue.js
- Styliser les composants Vue.js à l'aide de CSS
- Observateurs Vue.js
- Méthodes Vue vs observateurs vs propriétés calculées
- Filtres Vue.js
- Composants Vue.js
- Machines à sous Vue.js
- Accessoires de composants Vue.js
- Événements Vue.js
- Communication des composants Vue.js
- Vuex, le gestionnaire d'état de Vue.js
- Vue, utilisez un composant à l'intérieur d'un autre composant
- Vue, comment utiliser un accessoire comme nom de classe
- Comment utiliser SCSS avec les composants de fichier unique Vue.js
- Utilisation de Tailwind avec Vue.js
- Le routeur Vue
- Afficher dynamiquement un composant Vue
- La feuille de triche Vue.js
- Stocker les données Vue sur localStorage à l'aide de Vuex
- Comment appliquer dynamiquement une classe à l'aide de Vue
- Vue, comment utiliser v-model
- Vue, pourquoi les données doivent être une fonction
- Roadmap to become a Vue.js developer in 2020