Introduction à la méthode d'implémentation du flux de données unidirectionnel dans la documentation Vue

Vue est un framework JavaScript populaire qui utilise un modèle de flux de données unidirectionnel pour contrôler la transmission des données et la communication entre les composants. Dans le framework Vue, les données ne peuvent être transmises que des composants parents aux composants enfants, et les composants enfants ne peuvent pas modifier directement les données des composants parents. Ce modèle rend le code plus maintenable, fiable et facilement réutilisable.

Cet article présentera la méthode d'implémentation du flux de données unidirectionnel dans le document Vue.

1. Livraison Prop

Prop est l'une des principales méthodes pour implémenter un flux de données unidirectionnel dans le framework Vue. Dans Vue, nous pouvons utiliser Props pour transmettre des données du composant parent au composant enfant. L'attribut Prop reçu par le composant enfant est en lecture seule. Il ne peut pas modifier directement les données du composant parent et ne peut communiquer avec le composant parent que via l'événement d'émission.

Utilisez la directive v-bind dans le composant parent pour transmettre des données au composant enfant :

<template>
  <child-component :title="title"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      title: 'Hello, Vue!'
    }
  }
}
</script>

L'option props dans le composant enfant reçoit des données du composant parent :

<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  props: {
    title: String
  }
}
</script>

Dans le code ci-dessus, l'attribut title est défini en tant que type String, cela signifie que la validation et la conversion de type sont gérées par Vue. Le titre transmis n'est pas modifiable dans le sous-composant, et ne peut être utilisé que pour des opérations de calcul ou d'affichage.

2. Événements personnalisés

Dans le framework Vue, les composants parents et les composants enfants communiquent en utilisant des événements personnalisés. Le composant enfant peut utiliser la méthode $emit fournie par Vue pour déclencher un événement personnalisé et transmettre les données au composant parent. Le composant parent peut écouter l'événement émis par le composant enfant via la directive v-on pour recevoir des données.

Déclenchez des événements personnalisés dans les composants enfants :

<template>
  <button @click="increment">{{ counter }}</button>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    increment() {
      this.counter++
      this.$emit('increment', this.counter)
    }
  }
}
</script>

Écoutez des événements personnalisés dans les composants parents :

<template>
  <child-component @increment="onIncrement"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    onIncrement(counter) {
      console.log(`Counter is ${ counter }`)
    }
  }
}
</script>

Dans le code ci-dessus, le composant enfant définit une méthode d'incrémentation, qui est déclenchée à l'aide de la méthode $emit. Un événement d'incrémentation personnalisé. et transmettez la valeur du compteur en tant que paramètre au composant parent. Le composant parent écoute l'événement d'incrémentation lié au composant enfant via la directive v-on et définit une méthode onIncrement pour recevoir les données transmises par le composant enfant.

3. $attrs et $listeners

Parfois, nous utiliserons des événements natifs à l'intérieur du composant enfant dans le composant parent, tels que des événements de clic et de changement. Pour que ces événements fonctionnent correctement, Vue fournit des attributs spéciaux : $attrs et $listeners. $attrs permet au composant enfant de transmettre tous les attributs qui n'ont pas été définis par les accessoires au composant parent, tandis que $listeners peut transmettre tous les événements liés par le composant enfant (y compris les événements natifs et personnalisés) au composant parent.

Définissez un composant avec des événements natifs dans le composant enfant :

<template>
  <input type="text" @input="$emit('change', $event.target.value)">
</template>

<script>
export default {}
</script>

Utilisez le composant enfant dans le composant parent et liez l'événement natif :

<template>
  <child-component v-on="$listeners"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  }
}
</script>

Dans le code ci-dessus, le composant parent utilise la directive v-on pour $listeners Transmis au composant enfant, afin que le composant enfant puisse transmettre les événements natifs liés et les événements personnalisés au composant parent.

Résumé

Le modèle de flux de données unidirectionnel dans le framework Vue rend la communication entre les composants plus claire et plus fiable. Le transfert de données et la communication entre les composants peuvent être réalisés à l'aide de méthodes telles que Prop, des événements personnalisés et $attrs/$listeners. La maîtrise de ces compétences peut vous aider à mieux utiliser le framework Vue pour développer des applications qui répondent aux besoins des utilisateurs.

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!