Un guide complet pour implémenter la communication des composants dans Vue2.x (props, $emit, Vuex)

Un guide complet pour implémenter la communication entre composants dans Vue2.x (props, $emit, Vuex)

Vue, en tant que framework JavaScript moderne, est très populaire lors du développement d'applications Web. L'architecture composée de composants de Vue permet aux développeurs de séparer facilement le code et les fonctionnalités, tout en permettant une communication flexible via différents composants.

Dans cet article, nous explorerons trois méthodes de communication des composants dans Vue2.x : props, $emit et Vuex, pour vous aider à mieux gérer les ressources lors de la création d'applications Vue.

Props

props est l'une des méthodes de transmission de paramètres de composant de Vue. Les valeurs peuvent être transmises aux composants enfants à l'aide d'accessoires. Dans les composants enfants, les valeurs des accessoires sont en lecture seule, ce qui signifie qu'elles ne peuvent pas être modifiées. Cela permet un flux de données unidirectionnel, ce qui facilite la maintenance et le débogage des applications Vue.

Voici un exemple :

Dans le composant parent, nous pouvons créer un accessoire appelé "parent" et lui transmettre un accessoire appelé "message".

<template>
  <div>
    <child :message="msg"></child>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  name: "Parent",
  components: {
    Child
  },
  data() {
    return {
      msg: "Hello World!"
    };
  }
};
</script>

Dans le composant enfant, nous pouvons recevoir la valeur des accessoires transmise et l'utiliser dans le modèle.

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  name: "Child",
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

Dans cet exemple, "msg" est défini dans le composant parent et "message" est le nom des accessoires - qui doivent correspondre aux valeurs du composant parent. Les composants enfants doivent utiliser l'option "props" pour définir le type de données des accessoires et les valeurs qui doivent être transmises.

Il s'agit d'un exemple de base pour le transfert de données via des accessoires. Si vous devez transmettre plusieurs accessoires, vous pouvez les placer dans un objet et les transmettre au composant enfant.

$emit

$emit est une autre méthode de communication de composants largement utilisée dans Vue. Vous pouvez utiliser $emit pour déclencher des événements personnalisés et transmettre des données au composant parent. Contrairement aux accessoires, $emit peut réaliser un transfert de données bidirectionnel, rendant le partage de ressources entre les composants des applications Vue plus pratique.

Contrairement aux accessoires, $emit peut transmettre des données des composants enfants aux composants parents. Voici un exemple :

Dans cet exemple, nous définissons un nom d'événement personnalisé "salutation" et déclenchons l'événement lorsqu'un bouton est cliqué. Nous transmettons également l'élément sélectionné dans l'événement.

<template>
  <div>
    <button @click="sayHi()">Click me</button>
  </div>
</template>

<script>
export default {
  name: "Child",
  methods: {
    sayHi() {
      this.$emit("greeting", {
        message: "Hello World!"
      });
    }
  }
};
</script>

Dans le composant parent, nous pouvons écouter des événements personnalisés dans le composant enfant et utiliser les données transmises lorsque l'événement se déclenche.

<template>
  <div>
    <child @greeting="handleGreeting"></child>
    <div>{{ greeting }}</div>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  name: "Parent",
  components: {
    Child
  },
  data() {
    return {
      greeting: ""
    };
  },
  methods: {
    handleGreeting(data) {
      this.greeting = data.message;
    }
  }
};
</script>

Dans cet exemple, "handleGreeting" est la méthode utilisée pour gérer l'événement. Cette méthode reçoit en paramètre un événement personnalisé déclenché par le composant enfant. Le transfert de données peut être obtenu à partir de l'événement $emit dans le composant enfant.

Vuex

Vuex est une bibliothèque de gestion d'état pour les applications Vue.js. Il permet aux composants de partager leur état, rendant ainsi la communication entre les composants plus facile et plus efficace.

Voici un exemple :

Dans cet exemple, nous partageons des données en créant une boutique Vuex nommée "store". Dans l'attribut state, nous pouvons définir les données qui doivent être partagées. Dans l'attribut mutations, nous pouvons définir des fonctions pour modifier les données dans le magasin. Dans l'attribut getter, nous pouvons définir des fonctions qui traitent les données et renvoient la valeur partagée.

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    greeting: "Hello World!"
  },
  mutations: {
    changeGreeting(state, payload) {
      state.greeting = payload.greeting;
    }
  },
  getters: {
    getGreeting(state) {
      return state.greeting;
    }
  }
});

Vous pouvez utiliser les données et les fonctions du magasin dans n'importe quel composant Vue. Dans cet exemple, nous avons configuré deux boutons. Cliquer sur le bouton « salutation » affichera la valeur de l'attribut « salutation » dans le magasin. Le bouton "changer le message d'accueil" modifiera la valeur du "message d'accueil" dans le magasin en appelant la fonction que nous avons définie dans l'attribut mutations via la fonction commit.

<template>
  <div>
    <div>{{ greeting }}</div>
    <button @click="getGreeting">greeting</button>
    <button @click="changeGreeting">change greeting</button>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";

export default {
  name: "Child",
  computed: {
    ...mapGetters(["getGreeting"])
  },
  methods: {
    ...mapMutations(["changeGreeting"]),
    getGreeting() {
      alert(this.getGreeting);
    }
  }
};
</script>

Dans cet exemple, "mapGetters" et "mapMutations" peuvent être utilisés pour mapper les données et les fonctions du magasin aux propriétés et méthodes calculées du composant. Dans la méthode, nous utilisons alert pour afficher la valeur de l'attribut "greeting" dans le magasin. Lorsque vous cliquez sur le bouton « Modifier le message d'accueil », la fonction changeGreeting sera appelée pour modifier l'attribut « message d'accueil » dans le magasin.

Résumé

Voici les trois méthodes ci-dessus pour implémenter la communication des composants dans Vue2.x : props, $emit et Vuex. Dans le développement réel, vous pouvez choisir la méthode de communication à utiliser en fonction de différents besoins et scénarios.

Grâce aux accessoires, une transmission de données unidirectionnelle peut être réalisée pour garantir un flux de données clair entre les composants ; $emit peut effectuer une transmission de données bidirectionnelle entre les composants, rendant le partage de ressources entre les composants dans les applications Vue plus pratique ; peuvent être enregistrés dans le magasin, rendant la communication entre les composants plus facile et plus efficace.

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!