Émettre événements via `$emit`¶

Qu'est-ce que $emit?¶

$emit est une méthode qui permet à une composante enfant d'envoyer des événements au parent. C'est le système de communication ascendante (enfant → parent).

App parent (écoute l'événement)
↑
| $emit('event-name', data)
|
Composante enfant (émet l'événement)

Un événement c'est quoi¶

Un événement JavaScript est une action qui se produit dans le navigateur, comme un clic de souris click, une pression de touche keyDownou le chargement d'une page load. Dans le cas d'une composante Vue vous pouvez créer des événements custom pour communiquer à l'app parent un événement ponctuel et lui passer des données.

Pourquoi utiliser `$emit`?¶

Communication remontante : L'enfant informe le parent qu'une action s'est produite
Respecte le flux unidirectionnel : les props descendent ↓, les événements $emit montent ↑
Découplage : La composante enfant ne connaît pas la logique ni la structure du parent
Réutilisabilité : La composante enfant peut être utilisé avec différents parents

Syntaxe de base¶

Dans la composante enfant¶

// Émettre un événement simple
this.$emit('nomEvenement');

// Émettre un événement avec des données passées en paramètre
this.$emit('nomEvenement', donnees);

// Émettre avec plusieurs paramètres
this.$emit('nomEvenement', donnee1, donnee2, donnee3);

Dans l'app parent (écouter l'événement) avec `v-on` ou son racourci `@`¶

On écoute l'événement en question, de la même façon que vous utilisiez @click="maMethode" ou v-on:click="maMethode" sur une balise <button> par exemple.

Donc pour écouter l'événement nomEvenement émis par la composante enfant, dans l'app parent on aurait:

<!-- Sans paramètres -->
<compos-enfant @nom-evenement="maMethode"></compos-enfant>

<!-- Avec paramètres -->
<compos-enfant @nom-evenement="maMethode"></compos-enfant>

// Récupérer les données passées en paramètre via la méthode dans l'app parent
methods: {
  maMethode(data) {
    console.log(data);
  }
}

<!-- OU récupération des paramètres via une fonction fléchée inline -->
<compos-enfant @nom-evenement="(data) => console.log(data)"></compos-enfant>

Exemples d'utilisation¶

Exemple 1: Bouton qui émet un clic¶

See the Pen Vue: component emit - exemple 1 by TIM Montmorency (@tim-momo) on CodePen.

Exemple 2: Émettre avec des données¶

See the Pen Vue: component emit - exemple 2 (emit avec données) by TIM Montmorency (@tim-momo) on CodePen.

En savoir plus sur les événements de composant

Émettre événements via $emit¶