Comment utiliser $emit pour déclencher des événements dans Vue

Vue.js est un framework front-end populaire qui vous permet de créer des applications Web interactives et réactives. Il existe une fonctionnalité très puissante dans Vue.js appelée $emit. Grâce à cette fonctionnalité, vous pouvez déclencher un événement dans le composant enfant et le gérer dans le composant parent. Dans cet article, nous présenterons comment utiliser $emit pour déclencher des événements dans Vue.js.

$emit dans Vue.js

Dans Vue.js, tous les composants peuvent servir d'expéditeurs et de récepteurs d'événements. Lorsqu'un composant souhaite déclencher un événement, il peut utiliser la fonction $emit. La syntaxe de la fonction $emit est la suivante :

this.$emit(eventName, payload)

Cette fonction a deux paramètres. eventName est un type de chaîne, indiquant le nom de l'événement, et payload est un paramètre facultatif et peut être n'importe quel type de données. Lorsqu'un composant appelle cette fonction, Vue.js envoie un événement à son composant parent. Dans le composant parent, vous pouvez utiliser la directive v-on pour écouter cet événement.

Voici un exemple simple qui montre comment utiliser $emit dans Vue.js :

<!--Child Component-->
<template>
  <button @click="triggerEvent">Click me</button>
</template>

<script>
export default {
  methods: {
    triggerEvent() {
      this.$emit('my-event', 'Hello from child component!')
    }
  }
}
</script>

<!--Parent Component-->
<template>
  <div>
    <child-component @my-event="handleEvent"></child-component>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      message: ''
    }
  },
  methods: {
    handleEvent(payload) {
      this.message = payload
    }
  }
}
</script>

Dans cet exemple, nous définissons un composant appelé ChildComponent , qui possède un bouton. Lorsque vous cliquez sur le bouton, le composant enfant déclenche un événement personnalisé my-event en appelant la fonction $emit et transmet « Bonjour du composant enfant ! » comme charge utile au composant parent.

Dans le composant parent, nous utilisons la directive v-on pour écouter l'événement personnalisé my-event et gérer l'événement dans la méthode handleEvent. Dans cette méthode, nous attribuons la charge utile de l'événement à l'attribut de données du message. Nous affichons ensuite le message dans le modèle via une expression d'interpolation.

Summary

La fonction $emit dans Vue.js vous permet de déclencher des événements personnalisés dans les composants enfants et de gérer les événements dans les composants parents. Vous pouvez utiliser la fonction $emit pour transmettre n'importe quel type de données. Dans le composant parent, utilisez la directive v-on pour écouter les événements personnalisés.

J'espère qu'à travers cet article, vous avez appris les bases de l'utilisation de $emit pour déclencher des événements dans Vue.js.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!