Propriété emits de Vue3

Vue3 选项式 APIVue3 API des options

Dans Vue3,emitsla propriété est utilisée pour définir les événements qu'un composant peut déclencher.

emitsIl s'agit d'un tableau ou d'un objet utilisé pour déclarer explicitement quels événements personnalisés le composant déclenchera.

Viaemitsla propriété, les développeurs peuvent mieux gérer les événements des composants et améliorer la lisibilité et la maintenabilité du code.

Pourquoi utiliser la propriété emits ?

Dans Vue2, le composant parentv-onécoute les événements du composant enfant, tandis que le composant enfant utilise$emitla méthode pour déclencher des événements. Bien que cette approche soit simple et directe, à mesure que l'échelle du projet augmente, la gestion des événements peut devenir chaotique. Vue3 introduitemitsla propriété, qui présente les avantages suivants :

  1. Déclaration explicite des événements: Grâce àemitsla propriété, les développeurs peuvent savoir clairement quels événements le composant va déclencher.
  2. Lisibilité du code: Dans le composant, consulteremitsla propriété permet de comprendre rapidement les interactions événementielles du composant.
  3. Vérification des types et avertissements: Si l'événement déclenché n'est pas déclaréemitsdans celle-ci, Vue émettra un avertissement en mode développement, aidant les développeurs à découvrir des problèmes potentiels.

Comment utiliser la propriété emits ?

1. Utilisation de base

Dans un composant,emitsil peut être un tableau, listant les noms de tous les événements personnalisés.

Exemple

<script>
export default {
  emits: ['update:modelValue', 'submit'],
  methods: {
    handleClick() {
      this.$emit('submit', 'Formulaire soumis !');
    }
  }
}
</script>

Dans l'exemple ci-dessus,emitsle tableau déclareupdate:modelValueetsubmitdeux événements. Lors de l'appelthis.$emit('submit', 'Form submitted!')il déclenchesubmitl'événement, et transmet des données'Form submitted!'。

2. Utilisation d'objet

emitsIl peut également être un objet, dont les clés sont des noms d'événements et les valeurs des fonctions de validation. La fonction de validation est utilisée pour vérifier si les paramètres d'événement transmis sont valides.

Exemple

<script>
export default {
  emits: {
    submit: (payload) => {
      if (typeof payload === 'string') {
        return true;
      } else {
        console.warn('La charge utile de l'événement de soumission doit être une chaîne !');
        return false;
      }
    }
  },
  methods: {
    handleClick() {
      this.$emit('submit', 'Formulaire soumis !');
    }
  }
}
</script>

Dans cet exemple,submitla fonction de validation pour l’événement vérifiepayloads’il s’agit d’une chaîne. Sinon, elle affichera un message d’avertissement dans la console.

3. Combiné avec v-model

emitsLa propriété est souvent utiliséev-modelavec v-model, en particulier lors de la gestion de la liaison bidirectionnelle dans des composants personnalisés.

Exemple

<template>
  <input :value="modelValue" @input="updateValue" />
</template>

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  methods: {
    updateValue(event) {
      this.$emit('update:modelValue', event.target.value);
    }
  }
}
</script>

Dans cet exemple, lorsque la valeur du champ de saisie change, cela déclencheupdate:modelValuel'événement, et transmet la nouvelle valeur au composant parent.

Précautions

  1. Sensibilité à la casse des noms d'événements: Les noms d'événements dans Vue sont insensibles à la casse, mais il est recommandé d'utiliser la notation kebab-case (séparée par des traits d'union).
  2. Valeur de retour de la fonction de validation: Si la fonction de validation renvoiefalsefalse, Vue émettra un avertissement en mode développement, mais l'événement sera quand même déclenché.
  3. Événements par défaut: Certains événements natifs (tels queclickclick) n'ont pas besoin d'êtreemitsdéclarés, sauf si vous devez valider leurs paramètres.

Vue3 选项式 APIVue3 API des options

Autres extensions