Comprendre les événements personnalisés dans Vue.js / Blogs / Perficient

La création d’applications dynamiques et maintenables dans Vue.js nécessite une communication transparente entre les composants. Mais comment pouvez-vous garantir que vos composants enfants communiquent efficacement avec leurs composants parents, sans créer un enchevêtrement d’accessoires, de gestion d’état et de logique déroutante ?

Les événements personnalisés dans Vue.js offrent un moyen propre, simple et puissant de résoudre ce problème, permettant à votre application de rester flexible, évolutive et facile à maintenir. Dans ce guide, nous expliquerons comment utiliser des événements personnalisés avec l’API Options de Vue pour transmettre sans effort des données, déclencher des actions et maintenir vos composants découplés.

Que sont les événements personnalisés dans Vue.js ?

Les événements personnalisés permettent aux composants enfants d’envoyer des messages ou des données à leurs composants parents. Ceci est crucial lorsqu’un enfant a besoin de :

• Informer le parent d’un changement d’état
• Déclencher des actions ou des méthodes dans le parent
• Transmettre les données au parent, telles que les entrées utilisateur ou les mises à jour

Vue.js simplifie la émettre des événements à partir d’un composant enfant et écoutez ces événements chez le parent, assurant une communication fluide entre les deux.

Pourquoi devriez-vous utiliser des événements personnalisés ?

Les événements personnalisés apportent plusieurs avantages clés à votre application Vue.js :

• Envoyer des données aux composants parents : Émettez facilement des données ou des mises à jour de l’enfant au parent.
• Déclencher des actions parentales : Appelez des méthodes parent ou déclenchez des actions à partir du composant enfant.
• Maintenir un accouplement lâche : Les événements personnalisés vous permettent de conserver les composants indépendants les uns des autres, ce qui facilite la mise à l’échelle et la maintenance de votre application.

Comment émettre des événements personnalisés avec this.$emit()

Dans Vue.js, le ‘this.$emit()’ La méthode est utilisée pour déclencher des événements personnalisés d’un composant enfant vers son parent. Cela permet à l’enfant de communiquer avec le parent, en l’informant d’actions telles que les interactions de l’utilisateur ou les changements d’état.

Syntaxe: this.$emit(‘nom-événement’, charge utile);

• nom de l’événement : Le nom de l’événement personnalisé à émettre.
• charge utile (facultatif) : Les données que vous souhaitez transmettre avec l’événement (peuvent être une chaîne, un objet, un nombre, etc.).

Passons en revue un exemple pratique pour voir comment fonctionnent les événements personnalisés.

Guide étape par étape pour émettre des événements personnalisés dans Vue.js

Exemple 1 : émission d’événements personnalisés avec des arguments

Scénario: Système de gestion des tâches

Composant enfant : (AddTask.vue)

Permet à l’utilisateur d’ajouter une nouvelle tâche à la liste.

<template>
  <div>
    <input v-model="taskText" placeholder="Enter task" />
    <button @click="submitTask">Add Task</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      taskText: ''
    };
  },
  methods: {
    submitTask() {
      this.$emit('add-task', this.taskText);  // Emitting custom event with task text
    }
  }
}
</script>

Composant parent : (App.vue)

Gère une liste de tâches et les affiche.

<template>
  <div>
    <h1>Task List</h1>
    <AddTask @add-task="addTask" />
    <ul>
      <li v-for="task in tasks" :key="task.id">{{ task.id }} - {{ task.text }}</li>
    </ul>
  </div>
</template>

<script>
import AddTask from './AddTask.vue';

export default {
  components: {
    AddTask
  },
  data() {
    return {
      tasks: [],
      taskId: 1
    };
  },
  methods: {
    addTask(newTaskText) {
      this.tasks.push({
        id: this.taskId,
        text: newTaskText
      });
      this.taskId++;
    }
  }
}
</script>

Sortir:

Entrer « Tâche 1 » dans la zone de saisie et cliquez sur le ‘Ajouter une tâche’ bouton pour ajouter la tâche.

Comment ça marche :

Dans le composant enfant (AddTask.vue):

• Nous écoutons l’événement click sur le bouton et déclenchons le soumettre la tâche méthode.
• À l’intérieur soumettreTask(), nous utilisons this.$emit(‘ajouter une tâche’, this.taskText) pour émettre l’événement personnalisé ajouter une tâche avec le texte de tâche saisi comme données.

Dans le composant parent (app.view):

• Le parent écoute le ajouter une tâche événement utilisant @add-task= »addTask ».
• Le ajouter une tâche() La méthode reçoit le texte de la tâche comme argument, le traite et l’ajoute au tâches tableau.

Exemple 2 : émission d’événements personnalisés avec un objet

Examinons maintenant un exemple plus complexe, dans lequel l’enfant émet un objet avec des données utilisateur et le parent traite ces données.

Scénario: Affichage des informations utilisateur.

Composant enfant : (UserInfo.vue)

Contient des informations utilisateur et les émet en tant qu’objet.

<template>
  <div>
    <button @click="sendUserData">Send User Info</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendUserData() {
      const userData = { name: 'John Doe', age: 30 };
      this.$emit('user-data', userData);  // Emitting object with user data
    }
  }
}
</script>

Composant parent : (App.vue)

Écoute les données utilisateur et les traite.

<template>
  <div>
    <h1>User Information</h1>
    <UserInfo @user-data="handleUserData" />
    <p>Name: {{ userInfo.name }} </p>
    <p>Age{{ userInfo.age }}</p>
  </div>
</template>

<script>
import UserInfo from './UserInfo.vue';

export default {
  components: {
    UserInfo
  },
  data() {
    return {
      userInfo: {}
    };
  },
  methods: {
    handleUserData(userData) {
      this.userInfo = userData;  // Receiving and storing the user data
    }
  }
}
</script>

Sortir:

Cliquez sur le bouton pour afficher les informations sur l’utilisateur

Comment ça marche :

1. Dans le composant enfant (UserInfo.vue) :
   • Nous émettons un événement avec un objet contenant nom et âge comme données.
2. Dans le composant parent (app.view):
   • Le parent écoute l’événement, reçoit l’objet et enregistre ou affiche les données utilisateur.

Modificateurs d’événements dans Vue.js

Vue fournit de puissants modificateurs d’événement qui vous donnent un meilleur contrôle sur les événements personnalisés. Par exemple:

• .une fois: Déclenche l’écouteur d’événement une seule fois.
• .arrêt: Empêche l’événement de se propager davantage.
• .prévenir: Empêche le comportement par défaut de l’événement.
• .capturer: Écoute pendant la phase de capture.

Voici comment les utiliser :

Conclusion:

Les événements personnalisés dans Vue.js permettent aux composants enfants de communiquer avec leurs parents, ce qui facilite la transmission de données, le déclenchement d’actions et le maintien d’un couplage lâche entre les composants. En comprenant comment utiliser ceci.$emit(), gérez le transfert de données et utilisez des modificateurs d’événements, vous pouvez garder vos applications Vue.js propres, maintenables et évolutives.