Explication détaillée des étapes de la fonction de transfert de valeur dans la documentation Vue

Vue.js est un framework JavaScript populaire, l'un de ses grands avantages réside dans ses puissantes capacités de liaison de données. Dans Vue.js, les données sont transmises via des composants, et afin de transmettre des données entre différents composants, Vue.js fournit des fonctions de transmission de valeurs, telles que $emit et $on. Dans cet article, nous détaillerons comment utiliser ces fonctions pour mettre en œuvre le transfert de valeur.

1. Comprendre les concepts de base de la communication entre composants

Lors du développement avec Vue.js, vous devez généralement utiliser plusieurs composants pour travailler ensemble afin de créer une application complète. Par conséquent, la communication entre les composants est très importante et ils peuvent nous aider à mettre en œuvre diverses fonctions et interactions. Dans Vue.js, il existe deux manières de communiquer entre les composants :

• Communication entre les composants parent et enfant
• Communication entre les composants frères et sœurs

Lors de la communication entre les composants parent et enfant, vous pouvez utiliser les accessoires et la fonction $emit. Lors de la communication entre composants frères et sœurs, cela peut être réalisé à l’aide d’un composant parent commun.

2. Utilisez $emit pour implémenter la communication entre les composants parent et enfant

$emit() est une fonction de transfert de valeur très importante dans Vue.js, qui est utilisée pour la communication entre les composants parent et enfant. La fonction de cette fonction est de transmettre un événement personnalisé du composant enfant au composant parent et peut transmettre certains paramètres.

Voici les étapes à suivre pour utiliser $emit() pour implémenter la communication entre les composants parent et enfant :

Étape 1 : Définissez un composant enfant et utilisez la fonction $emit() pour déclencher un événement dans le composant.

<template>
  <div>
    <button @click="passData">传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    passData() {
      this.$emit('get-data', 'Hello Vue')
    }
  }
}
</script>

Dans le code ci-dessus, nous définissons un sous-composant et y définissons un bouton Lorsque vous cliquez sur le bouton, la méthode passData est déclenchée, qui utilise la fonction $emit() pour déclencher un événement nommé get-data , et. porte un paramètre de chaîne Hello Vue.

Étape 2 : utilisez la directive v-on dans le composant parent pour écouter les événements déclenchés par le composant enfant et définissez une fonction de gestionnaire pour recevoir les paramètres transmis par le composant enfant.

<template>
  <div>
    <child-component @get-data="getData"></child-component>
    <p>接收到子组件传递的数据：{{ data }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent'
export default {
  components: { ChildComponent },
  data() {
    return {
      data: ''
    }
  },
  methods: {
    getData(data) {
      this.data = data
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons l'instruction v-on pour écouter l'événement nommé get-data Lorsque le sous-composant déclenche l'événement, la méthode nommée getData sera appelée et les paramètres passés par le sous-composant seront transmis. Donnez la méthode. Dans cette méthode, nous attribuons le paramètre à l'attribut data pour afficher les données transmises par le composant enfant dans le composant parent.

3. Utilisez $on pour implémenter la communication entre les composants frères

$on() est une autre fonction de transfert de valeur importante dans Vue.js, qui est utilisée pour la communication entre les composants frères. La fonction de cette fonction est d'écouter un événement personnalisé dans le composant enfant et de répondre à l'événement.

Voici les étapes pour implémenter la communication entre les composants frères à l'aide de $on() :

Étape 1 : Définir un composant parent commun.

<template>
  <div>
    <child-component></child-component>
    <another-child-component></another-child-component>
  </div>
</template>

Dans le code ci-dessus, nous définissons un composant parent qui contient deux composants enfants.

Étape 2 : utilisez la fonction $on() dans le composant enfant pour écouter un événement personnalisé.

<script>
export default {
  created() {
    this.$root.$on('trigger-event', this.handleEvent)
  },
  methods: {
    handleEvent() {
      console.log('Hello Vue!')
    }
  },
  destroyed() {
    this.$root.$off('trigger-event', this.handleEvent)
  }
}
</script>

Dans le code ci-dessus, nous utilisons la fonction hook créée pour commencer à écouter l'événement nommé trigger-event lorsque le composant enfant est créé. Lorsque l'événement est écouté, une méthode nommée handleEvent est appelée, qui est utilisée pour gérer l'événement. Nous utilisons également la fonction de hook détruit pour supprimer l'écouteur d'événements lorsque le composant enfant est détruit afin d'éviter les fuites de mémoire.

Étape 3 : Utilisez la fonction $emit() dans un autre composant enfant pour déclencher l'événement.

<script>
export default {
  methods: {
    triggerEvent() {
      this.$root.$emit('trigger-event')
    }
  }
}
</script>

Dans le code ci-dessus, nous avons défini un composant enfant et défini un bouton à l'intérieur de celui-ci. Lorsque l'utilisateur clique sur le bouton, la méthode triggerEvent est appelée, qui déclenche un événement nommé trigger-event à l'aide de la fonction $emit().

4. Résumé

Dans Vue.js, en utilisant les fonctions $emit et $on, un transfert de valeur entre les composants parent-enfant et les composants frères et sœurs peut être réalisé. Tout d’abord, nous devons définir le sous-composant et déclencher un événement personnalisé en utilisant la fonction $emit qu’il contient. Ensuite, nous devons utiliser la directive v-on dans le composant parent pour écouter l'événement et traiter les paramètres transmis par le composant enfant dans la fonction de gestionnaire. Pour la communication entre les composants frères, nous devons utiliser la fonction $on pour écouter un événement personnalisé sous un composant parent commun et utiliser la fonction $emit pour déclencher l'événement dans un autre composant enfant. Ces fonctions de transfert de valeurs sont une partie très importante de Vue.js. Leur maîtrise nous permet de mieux transférer les données entre les composants.

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!