Eine vollständige Anleitung zur Implementierung der Komponentenkommunikation in Vue2.x (props, $emit, Vuex)

Eine vollständige Anleitung zur Implementierung der Komponentenkommunikation in Vue2.x (props, $emit, Vuex)

Vue erfreut sich als modernes JavaScript-Framework großer Beliebtheit bei der Entwicklung von Webanwendungen. Die komponentenbasierte Architektur von Vue ermöglicht Entwicklern die einfache Trennung von Code und Funktionalität und ermöglicht gleichzeitig eine flexible Kommunikation über verschiedene Komponenten.

In diesem Artikel werden wir drei Methoden der Komponentenkommunikation in Vue2.x untersuchen: props, $emit und Vuex, um Ihnen beim Erstellen von Vue-Anwendungen eine bessere Ressourcenverwaltung zu ermöglichen.

Props

props ist eine der Komponentenparameter-Übergabemethoden von Vue. Werte können mithilfe von Requisiten an untergeordnete Komponenten übergeben werden. In untergeordneten Komponenten sind die Werte von Requisiten schreibgeschützt, was bedeutet, dass sie nicht geändert werden können. Dies ermöglicht einen unidirektionalen Datenfluss und erleichtert so die Wartung und das Debuggen von Vue-Anwendungen.

Hier ist ein Beispiel:

In der übergeordneten Komponente können wir eine Requisite namens „parent“ erstellen und ihr eine Requisite namens „message“ übergeben.

<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>

In der untergeordneten Komponente können wir den übergebenen Props-Wert empfangen und ihn in der Vorlage verwenden.

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

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

In diesem Beispiel ist „msg“ in der übergeordneten Komponente definiert und „message“ ist der Name der Requisiten – der mit dem Wert in der übergeordneten Komponente übereinstimmen muss. Untergeordnete Komponenten müssen die Option „props“ verwenden, um den Datentyp der Requisiten und die zu übergebenden Werte zu definieren.

Dies ist ein einfaches Beispiel für die Datenweitergabe durch Requisiten. Wenn mehrere Requisiten übergeben werden müssen, können Sie diese in ein Objekt einfügen und an die untergeordnete Komponente übergeben.

$emit

$emit ist eine weitere weit verbreitete Komponentenkommunikationsmethode in Vue. Sie können $emit verwenden, um benutzerdefinierte Ereignisse auszulösen und Daten an die übergeordnete Komponente zu übergeben. Im Gegensatz zu Requisiten kann $emit eine bidirektionale Datenübertragung erreichen, wodurch die gemeinsame Nutzung von Ressourcen zwischen Komponenten in Vue-Anwendungen bequemer wird.

Im Gegensatz zu Requisiten kann $emit Daten von untergeordneten Komponenten an übergeordnete Komponenten weitergeben. Hier ist ein Beispiel:

In diesem Beispiel definieren wir einen benutzerdefinierten Ereignisnamen „Begrüßung“ und lösen das Ereignis aus, wenn auf eine Schaltfläche geklickt wird. Wir übergeben das ausgewählte Element auch an das Ereignis.

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

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

In der übergeordneten Komponente können wir benutzerdefinierte Ereignisse in der untergeordneten Komponente abhören und die übergebenen Daten verwenden, wenn das Ereignis ausgelöst wird.

<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>

In diesem Beispiel ist „handleGreeting“ die Methode, die zum Behandeln des Ereignisses verwendet wird. Diese Methode empfängt als Parameter ein benutzerdefiniertes Ereignis, das von der untergeordneten Komponente ausgelöst wird. Die Datenübertragung kann über das $emit-Ereignis in der untergeordneten Komponente erfolgen.

Vuex

Vuex ist eine Zustandsverwaltungsbibliothek für Vue.js-Anwendungen. Dadurch können Komponenten ihren Status teilen, wodurch die Kommunikation zwischen Komponenten einfacher und effizienter wird.

Hier ist ein Beispiel:

In diesem Beispiel teilen wir Daten, indem wir einen Vuex-Store mit dem Namen „store“ erstellen. Im Statusattribut können wir die Daten definieren, die geteilt werden müssen. Im Mutationsattribut können wir Funktionen zum Ändern von Daten im Speicher definieren. Im Getter-Attribut können wir Funktionen definieren, die die Daten verarbeiten und den gemeinsamen Wert zurückgeben.

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;
    }
  }
});

Sie können Daten und Funktionen aus dem Store in jeder Vue-Komponente verwenden. In diesem Beispiel haben wir zwei Schaltflächen eingerichtet. Durch Klicken auf die Schaltfläche „Begrüßung“ wird der Wert des Attributs „Begrüßung“ im Shop angezeigt. Die Schaltfläche „Begrüßung ändern“ ändert den Wert „Begrüßung“ im Speicher, indem die Funktion, die wir im Mutationsattribut definiert haben, über die Commit-Funktion aufgerufen wird.

<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>

In diesem Beispiel können „mapGetters“ und „mapMutations“ verwendet werden, um Daten und Funktionen im Speicher den berechneten Eigenschaften und Methoden der Komponente zuzuordnen. In der Methode verwenden wir Alert, um den Wert des Attributs „greeting“ im Store anzuzeigen. Wenn auf die Schaltfläche „Begrüßung ändern“ geklickt wird, wird die Funktion „changeGreeting“ aufgerufen, um das Attribut „Begrüßung“ im Store zu ändern.

Zusammenfassung

Die oben genannten sind die drei Methoden zur Implementierung der Komponentenkommunikation in Vue2.x: props, $emit und Vuex. In der tatsächlichen Entwicklung können Sie basierend auf unterschiedlichen Anforderungen und Szenarien auswählen, welche Kommunikationsmethode verwendet werden soll.

Durch Requisiten kann eine unidirektionale Datenübertragung erreicht werden, um einen klaren Datenfluss zwischen Komponenten sicherzustellen. Durch die Verwendung von Vuex können öffentliche Daten in beide Richtungen übertragen werden können im Lager gespeichert werden, wodurch die Kommunikation zwischen den Komponenten einfacher und effizienter wird.

Das obige ist der detaillierte Inhalt vonEine vollständige Anleitung zur Implementierung der Komponentenkommunikation in Vue2.x (props, $emit, Vuex). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!