Erste Schritte mit VUE3 für Anfänger: Bereitstellung/Injektion zum Teilen zwischen Komponenten verwenden

VUE ist ein modernes Front-End-Framework mit den Vorteilen hoher Benutzerfreundlichkeit, hoher Flexibilität und hervorragender Leistung. Es erfreut sich bei Front-End-Entwicklern zunehmender Beliebtheit und Beliebtheit. Die VUE3-Version bietet eine bessere Leistung, ein besseres architektonisches Design und ist benutzerfreundlicher. VUE3 bietet eine neue Möglichkeit, Daten zwischen Komponenten auszutauschen – Bereitstellen/Injizieren. In diesem Artikel wird der Verwendungs- und Implementierungsprozess von Provide/Inject ausführlich vorgestellt.

Übersicht

provide/inject ist eine von VUE3 offiziell empfohlene Methode zum Austausch von Daten zwischen Komponenten. In VUE2 implementieren wir häufig die Datenkommunikation zwischen Komponenten über props/$emit und Vuex. Das größte Merkmal von Provide/Inject besteht darin, dass es die gemeinsame Nutzung von Daten auf implizitere Weise implementiert, wodurch der Code lesbarer und wartbarer wird.

Verwendung von Provide/Inject

Die Verwendung von Provide/Inject ist sehr einfach, hier sind ein paar Beispiele:

Übergeordnete Komponente stellt Daten bereit

<template>
  <child-component />
</template>

<script>
import { provide } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  setup() {
    provide('message', 'Hello from parent')
  }
}
</script>

In der übergeordneten Komponente stellen wir über die Bereitstellungsmethode data and eine Nachricht mit dem Namen message bereit Setzen Sie den Wert auf „Hallo vom Elternteil“. Dann können wir „inject“ in der Unterkomponente verwenden, um diese Daten abzurufen:

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

<script>
import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}
</script>

In der Unterkomponente verwenden wir die „inject“-Methode, um die Daten mit dem Namen „message“ abzurufen. Zu diesem Zeitpunkt können wir diese Daten in der Vorlage verwenden.

Untergeordnete Komponente stellt Daten bereit

<template>
  <child-component />
</template>

<script>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  setup() {
    const message = ref('Hello from parent')
    return { message }
  },
  provide: {
    message: this.message
  }
}
</script>

In diesem Beispiel definieren wir reaktive Daten namens Nachricht in der übergeordneten Komponente und setzen ihren Wert auf „Hallo vom übergeordneten Element“. Anschließend stellen wir diese Daten über die Provide-Methode der untergeordneten Komponente zur Verfügung. In der untergeordneten Komponente erhalten wir die Nachricht über die Injektionsmethode und verwenden sie in der Vorlage:

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

<script>
import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}
</script>

Beachten Sie, dass die Nachrichtendaten, die wir hier definieren, responsiv sind.

Der Implementierungsprozess von Provide/Inject

Die Implementierung von Provide/Inject basiert auf dem neuen Antwortsystem in VUE3. In VUE3 ist „Provide/Inject“ darauf angewiesen, dass provideParent / injectSetupRef funktioniert. Die Funktion „proveParent“ ähnelt der Methode „provide“, da beide den Schlüsselnamen und den Wert von Daten empfangen, während injectSetupRef zum Abrufen von Daten von der übergeordneten Komponente verwendet wird. Der spezifische Implementierungsprozess ist wie folgt:

// provide函数
export function provide(key, value) {
  const vm = getCurrentInstance();
  if (!vm) {
    console.warn(`provide() can only be used inside setup().`);
  } else {
    let provides  = vm.provides;
    const parent = vm.parent;
    if (provides === EMPTY_OBJ) provides = vm.provides = Object.create(parent.provides);
    provides[key] = value;
  }
}

// inject函数
export function inject(key, defaultValue) {
  const vm = getCurrentInstance();
  if (vm) {
    const provides = vm.parent.provides;
    if (key in provides) {
      return provides[key];
    } else if (arguments.length > 1) {
      return defaultValue;
    } else {
      console.warn(`injection "${String(key)}" not found.`);
    }
  } else {
    console.warn(`inject() can only be used inside setup() or functional components.`);
  }
}

In der Bereitstellungsfunktion erhalten wir die aktuelle Instanz über die Funktion getCurrentInstance und speichern die bereitgestellten Daten im Bereitstellungsobjekt der aktuellen Instanz. Wenn die aktuelle Instanz nicht vorhanden ist, bedeutet dies, dass die Bereitstellungsfunktion in der Setup-Funktion nicht aufgerufen wird und eine Warnmeldung zurückgegeben wird.

In der Injektionsfunktion erhalten wir auch die aktuelle Instanz über die Funktion getCurrentInstance und erhalten den dem Schlüssel entsprechenden Wert vom Bereitstellungsobjekt seiner übergeordneten Komponente. Wenn der dem Schlüssel entsprechende Wert nicht vorhanden ist, wird defaultValue zurückgegeben. Wenn die aktuelle Instanz nicht vorhanden ist, bedeutet dies, dass die Injektionsfunktion nicht in der Setup-Funktion oder Funktionskomponente aufgerufen wurde und eine Warnmeldung zurückgegeben wird.

Zusammenfassung

Durch die Einleitung dieses Artikels können wir erkennen, dass Bereitstellung/Injektion eine hervorragende Methode zum Austausch von Daten zwischen VUE3-Komponenten ist. Es implementiert den Datenaustausch auf eine implizitere Art und Weise, wodurch der Code lesbarer und wartbarer wird. Bitte beachten Sie bei der Nutzung, dass die bereitgestellten Daten responsiv sind und in verschachtelten Komponenten verwendet werden können. Gleichzeitig ist zu beachten, dass die in arguments[1] übergebenen Parameter als Standardwert verwendet werden, wenn die von uns bereitgestellten Daten nicht vorhanden sind. Zu diesem Zeitpunkt müssen Sie immer auf den Typ achten und Wert der Parameter.

Das obige ist der detaillierte Inhalt vonErste Schritte mit VUE3 für Anfänger: Bereitstellung/Injektion zum Teilen zwischen Komponenten verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!