Créez une application web avec Vue.js

Nous avons beaucoup appris sur la façon de communiquer depuis les composants parents vers les composants enfants, mais qu'en est-il de la communication vers les parents ? 👩‍👧‍👦 La manière la plus courante est d'émettre des événements personnalisés.

Révisez les événements

En développement web, les événements sont des actions ou des occurrences qui se produisent pendant l'utilisation d'un site web. Voici des exemples courants d'événements :

• lorsqu'un utilisateur clique sur un élément ;

• lorsqu'un utilisateur appuie sur une touche du clavier ;

• lorsqu'un formulaire est soumis ;

• lorsque la fenêtre d'un navigateur est redimensionnée.

Lorsque ces actions se produisent, des événements sont émis afin que nous puissions y répondre en utilisant des techniques comme les gestionnaires d'événements. Un objet événement (event-object) est alors automatiquement passé aux événements. Il contiendra des fonctionnalités supplémentaires ou des informations sur l'événement. Par exemple, lorsqu'un utilisateur appuie sur une touche du clavier, l'objet événement peut nous indiquer quelle touche a été actionnée.

Créez un événement personnalisé

Dans le monde du frontend, la gestion des événements est répandue. Comme nous l'avons vu précédemment avec la directive  v-on, nous pouvons facilement écouter des événements courants et déclencher des fonctions à volonté. Cependant, ce serait bien pratique de pouvoir définir nos propres événements personnalisés faisant l'objet d'une émission, non ? Heureusement, c'est très facile à réaliser avec la fonctionnalité intégrée  $emit  de Vue. Voyons cela en action ! 🔍

Utilisez $emit

La fonction  $emit  prend deux paramètres :

• le nom de l'événement (qui doit être défini en kebab-case) ;

• un payload optionnel que vous pouvez utiliser pour passer des données à l'écouteur de l'événement.

src/ChildComponent.vue

<template>
    <button @click="emitCustomEvent">Emit Event</button>
</template>

<script>
export default {
    methods: {
        emitCustomEvent() {
            this.$emit('custom-event-name', { message: 'Mon message personnalisé' })
        }
    }
}
</script>

Écoutez et répondez à un événement émis

Une fois qu'un événement est émis, le composant parent qui utilise le composant enfant est capable d'écouter l'événement via la directive  v-on. Pour cela, vous devez :

1. Ajouter un écouteur d'événement (listener)   v-on  avec le nom de l'événement personnalisé sur le composant émettant l'événement.

2. Lui assigner une méthode recevant le payload comme premier argument s'il existe.

src/ParentComponent.vue

<template>
    <div>
        <p>{{ message }}</p>
        <!-- Écoute les événements personnalisés et y assigne une méthode -->
        <ChildComponent @custom-event-name="setMessage" />
    </div>
</template>

<script>
import ChildComponent from './ChildComponent'

export default {
    components: { ChildComponent },
    data () {
        return {
            message: 'Hello'
        }
    },
    methods: {
        // Définit la méthode utilisée par le payload pour mettre à jour la propriété data
        setMessage(payload) {
            this.message = payload.message
        }
    }
}
</script>

Entraînez-vous

Vous trouverez le code source des exercices dans le repo GitHub du cours dans le dossier  cafe-with-a-view. Pour commencer, consultez la branche  P3C3-Begin.

Instructions

1. Supprimez la prop  addToShoppingCart du  MenuItem

2. Créez une nouvelle méthode appelée   updateShoppingCart  dans  MenuItem  qui émet un événement appelé  add-items-to-cart  à  Home.vue  pour mettre à jour le panier.

En résumé

Dans ce chapitre, vous avez appris à :

•     définir des événements personnalisés dans les composants ;

•     émettre des événements personnalisés à partir de composants enfants ;

•     écouter des événements personnalisés à partir de composants enfants ;

•     utiliser le payload des événements personnalisés pour effectuer des actions supplémentaires.

Dans la leçon suivante, nous étudierons une nouvelle technique pour passer des données aux composants : les slots. Alors, on se retrouve au prochain chapitre. 👋