Comment émettre des événements pour communiquer entre les composants Vue
La structuration de vos applications web à l’aide d’une architecture de composants facilite la construction et la maintenance de votre application.
L’émission d’événements personnalisés est l’un des moyens de gérer la communication entre les composants ; les props et les slots en sont deux autres. Les événements personnalisés vous permettent d’envoyer des données du composant enfant au composant parent.
Émettre des événements d’un enfant vers son parent
Vue offre de nombreuses options pour communiquer entre les composants. L’un des principaux moyens de communication entre les composants est l’utilisation d’accessoires. Les props vous permettent d’envoyer des données des composants parents aux composants enfants.
Que se passe-t-il alors si vous souhaitez envoyer des données du composant enfant au composant parent ? Vue vous permet d’émettre des événements personnalisés depuis les composants enfants vers les composants parents. Ce processus permet au composant parent d’utiliser les données et les fonctions du composant enfant.
Par exemple, imaginez un composant de type bouton doté d’une fonction qui renvoie une valeur à chaque clic. Vous devrez transmettre cet événement au composant parent pour lui permettre de mettre à jour son état ou d’effectuer une action en fonction de la valeur renvoyée.
Convention de nommage pour les événements personnalisés émis dans Vue
Avant de plonger dans l’émission d’événements personnalisés, vous devez comprendre la convention de nommage des événements personnalisés dans Vue. Avant l’apparition de Vue 3, les développeurs devaient strictement définir les événements personnalisés avec des balises kebab-case en séparant les mots des noms par un trait d’union.
Il est désormais d’usage de définir les événements personnalisés en majuscules lorsque l’on travaille avec des modèles HTML, et de séparer les mots par un trait d’union. camelCase lorsque vous travaillez avec JavaScript. Cependant, vous pouvez choisir d’utiliser n’importe quelle option lorsque vous travaillez avec JavaScript, car Vue compile tous les événements personnalisés en majuscules.
Lorsque vous émettez un événement personnalisé, communiquez l’objectif de l’événement à l’aide d’un nom descriptif. C’est très important, surtout lorsque vous travaillez en équipe, pour que l’objectif de l’événement soit clair.
Comment émettre des événements personnalisés d’un composant enfant vers un composant parent ?
Il existe deux façons d’émettre des événements personnalisés dans Vue. Vous pouvez émettre des événements personnalisés en ligne (directement dans le modèle Vue) avec la méthode $emit fournie par Vue. Vous pouvez également utiliser la méthode defineEmits disponible dans Vue 3.
Émettre des événements personnalisés dans Vue avec la méthode $emit
$emit une méthode Vue intégrée, permet à un composant enfant d’envoyer un événement à son composant parent. Vous appelez cette méthode en ligne (dans le modèle du composant enfant) pour déclencher l’événement personnalisé. La méthode $emit prend deux arguments : le nom de l’événement que vous souhaitez émettre et une charge utile facultative qui peut contenir des données supplémentaires.
Considérons ce composant enfant qui émet un événement pour informer le composant parent d’un clic sur un bouton :
Ce bloc de code montre comment émettre un événement personnalisé à partir d’un composant enfant. L’enfant commence par initialiser une variable post avec une chaîne vide.
Le composant enfant lie ensuite l’élément d’entrée à la variable post avec v-model, une directive de liaison de données Vue. Cette liaison permet aux modifications que vous apportez au champ de saisie de mettre à jour la variable post automatiquement.
L’élément button a une directive v-on qui écoute les événements de clic sur le bouton. Le clic sur le bouton appelle la méthode $emit avec deux arguments : le nom de l’événement, « button-clicked », et la valeur de la variable post.
Le composant parent peut maintenant écouter l’événement personnalisé avec la directive v-on pour gérer les événements dans Vue :
Ce bloc de code démontre qu’un composant parent importe et utilise le composant enfant précédent. Le composant parent définit un postList comme référence réactive. Le composant définit ensuite un tableau addPosts qui s’exécute en prenant un post comme argument. La fonction ajoute un nouveau message au tableau postList avec l’argument push() .
La méthode @button-clicked capture l’événement personnalisé que le ChildComponent émet lorsque vous cliquez sur le bouton. Cet événement entraîne l’exécution de la fonction addPosts. Enfin, le bloc de code attache le composant v-pour pour le rendu des listes dans Vue à l’élément ul pour itérer sur le tableau postList.
Émettre des événements avec la macro defineEmits
Vue 3 a introduit la macro defineEmits qui définit explicitement les événements qu’un composant peut émettre. Cette macro fournit un moyen sûr d’émettre des événements, ce qui conduit à une base de code plus structurée.
Voici un exemple de la façon dont vous pouvez utiliser la macro defineEmits et l’appeler dans votre composant enfant :
Bien que la fonctionnalité reste la même, il y a des différences significatives dans la syntaxe du code entre le bloc de code ci-dessus et celui avec la macro $emit .
Dans ce bloc de code, la fonction defineEmits définit la macro bouton-cliqué événement. En appelant cette macro, le bloc de code renvoie une fonction $emit, ce qui vous permet d’émettre les événements définis. Le tableau transmis à la macro defineEmits dans le composant contiendra tous les événements que vous devez transmettre au composant parent.
Ensuite, le bloc de code définit un buttonClick Cette fonction transmet l’événement « bouton cliqué » et la variable post au composant parent. Cette fonction transmet l’événement « bouton cliqué » et la variable post au composant parent. Le bloc de gabarit du composant enfant contient un élément bouton.
L’élément button possède une fonction v-on:click qui déclenche la fonction buttonClick. Le composant parent peut alors utiliser le composant enfant de la même manière qu’avec la méthode $emit.
Les développeurs Vue bénéficient d’une architecture basée sur les composants
Vous pouvez communiquer d’un composant enfant à son parent en émettant des événements à l’aide de la méthode $emit et de la macro defineEmits.
L’architecture à base de composants de Vue vous permet d’écrire un code plus structuré et plus concis. Avec les cadres JavaScript modernes comme Vue, vous pouvez utiliser les composants Web, une norme Web du W3C, pour réaliser cette architecture basée sur les composants.
Comment communiquer entre deux composants dans Vue ?
Vue dispose d’un moyen de communiquer entre deux composants enfants par l’intermédiaire d’un composant parent en utilisant des émetteurs d’événements. Lorsque vous configurez un événement dans un composant enfant et un écouteur dans le composant parent, la réaction est transmise aux composants imbriqués par l’intermédiaire du parent.
Comment communiquer entre composants frères dans Vue ?
Communication entre frères et sœurs via un bus d’événements. Au fur et à mesure que l’application se développe, il peut être difficile de tout faire passer par le composant parent. Une autre option consiste à utiliser une architecture de type bus d’événements pour communiquer entre les composants frères et sœurs. Cela permet d’utiliser une classe ou un objet central pour transmettre les données.
Comment émettre un événement sur Vue ?
Avec la méthode intégrée $emit() dans Vue, nous pouvons créer un événement personnalisé dans le composant enfant qui peut être capturé dans l’élément parent. Les props sont utilisés pour envoyer des données de l’élément parent au composant enfant, et $emit() est utilisé pour faire l’inverse : transmettre des informations du composant enfant au parent.
Comment transmettre des données à un autre composant dans Vue JS ?
Utiliser les props pour partager des données entre parents et enfants # Les props de VueJS sont le moyen le plus simple de partager des données entre composants. Les props sont des attributs personnalisés que nous pouvons donner à un composant. Ensuite, dans notre modèle, nous pouvons donner des valeurs à ces attributs et – BAM – nous transmettons des données d’un composant parent à un composant enfant !
