Comment émettre des événements pour communiquer entre les composants Vue

Structurer vos applications Web à l'aide d'une architecture de composants facilite la création et la maintenance de votre application.

L'émission d'événements personnalisés est un moyen de gérer la communication entre les composants; les accessoires et les fentes 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 à son parent

Vue offre de nombreuses options pour communiquer entre les composants. Un moyen significatif de la communication entre les composants se fait par le biais d'accessoires. Les accessoires vous permettent d'envoyer des données du parent 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 des composants enfants aux 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 bouton avec une fonction qui renvoie une valeur à chaque clic. Vous devrez émettre cet événement au composant parent pour permettre au composant parent de mettre à jour son état ou d'effectuer une action basée sur la valeur renvoyée.

Convention de dénomination pour les événements émis personnalisés dans Vue

Avant de vous plonger dans l'émission d'événements personnalisés, vous devez comprendre la convention de dénomination des événements personnalisés dans Vue. Avant l'émergence de Vue 3, les développeurs devaient strictement définir des événements personnalisés avec étui à kebab, séparant les mots dans les noms par un trait d'union.

Il est désormais courant de définir vos événements personnalisés en cas de kebab lorsque vous travaillez avec des modèles HTML, et affaire de chameau 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 dans kebab-case.

Lorsque vous émettez un événement personnalisé, indiquez le but de l'événement avec un nom descriptif. Ceci est très important, surtout lorsque vous travaillez en équipe, pour clarifier le but de l'événement.

Comment émettre des événements personnalisés du composant enfant au 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 le $émettre méthode fournie par Vue. Vous pouvez également utiliser le définirEmits macro disponible à partir de Vue 3.

Émission d'événements personnalisés dans Vue avec la méthode $emit

$émettre, 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 transporter des données supplémentaires.

Considérez ce composant enfant qui émet un événement pour informer le composant parent d'un clic sur un bouton :

 ChildComponent.vue 
<scénarioinstallation>
importer { ref } de 'vue' ;
poste const = ref('')
scénario>
<modèle>
<div>
<saisirtaper="texte"modèle en V="poste">
<boutonv-on: cliquez="$emit('bouton cliqué', post)">Postebouton>
div>
modèle>

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, un Directive de liaison de données Vue. Cette liaison permet aux modifications que vous apportez au champ de saisie de mettre à jour automatiquement la variable post.

L'élément bouton 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, "bouton cliqué", et la valeur de la variable post.

Le composant parent peut maintenant écouter l'événement personnalisé avec la directive v-on pour gestion des événements dans Vue:

 ParentComponent.vue 
importer { ref } de "vue" ;
importer ChildComponent depuis "./components/ChildComponent.vue" ;
const postList = ref([])
const addPosts = (post) => {
 postList.value.push (post)
}
scénario>
<modèle>
<div>
<Composant enfant @bouton-cliqué="addPosts"/>
<ul>
<liv-pour="poster dans la postList">{{ poste }}li>
ul>
div>
modèle>

Ce bloc de code illustre un composant parent important et utilisant le composant enfant d'avant. Le composant parent définit un postList variable de tableau comme référence réactive. Le composant définit alors un addPosts fonction qui s'exécute, en prenant un poste argument. La fonction ajoute un nouveau message au tableau postList avec le pousser() méthode.

Le @bouton cliqué l'écouteur d'événement capture l'événement personnalisé Composant enfant émet lorsque vous cliquez sur le bouton. Cet événement provoque l'exécution de la fonction addPosts. Enfin, le bloc de code attache le v-pour directive pour listes de rendu dans Vue à l'élément ul pour parcourir le tableau postList.

Émission d'événements avec la macro defineEmits

Vue 3 a introduit le définirEmits macro, qui définit explicitement les événements qu'un composant peut émettre. Cette macro fournit un moyen sécurisé d'émettre des événements menant à 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 :

 ChildComponent.vue 
<scénarioinstallation>
importer { ref } de "vue" ;
const emission = defineEmits(["bouton cliqué"]);
poste const = ref("");
bouton constClic = () => {
 émet("bouton cliqué", post.value);
};
scénario>
<modèle>
<div>
<saisirtaper="texte"modèle en V="poste" />
<boutonv-on: cliquez="boutonClic">Postebouton>
div>
modèle>

Bien que la fonctionnalité reste la même, il existe des différences significatives dans la syntaxe du code entre le bloc de code ci-dessus et celui avec le $émettre fonction.

Dans ce bloc de code, le définirEmits macro définit le bouton-cliqué événement. En appelant cette macro, le bloc de code renvoie une fonction $emit, vous permettant d'émettre les événements définis. Le tableau passé à la macro defineEmits dans le composant contiendra tous les événements que vous devez émettre au composant parent.

Ensuite, le bloc de code définit un boutonCliquez fonction. Cette fonction émet l'événement de clic sur le bouton et la variable post au composant parent. Le bloc de modèle du composant enfant contient un élément de bouton.

L'élément bouton a un v-on: cliquez directive déclenchant la fonction buttonClick. Le composant parent peut alors utiliser le composant enfant de la même manière qu'il l'a fait 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.

Vous pouvez bénéficier de l'architecture basée sur les composants de Vue car elle vous permet d'écrire un code plus structuré et concis. Avec les frameworks 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.