Stellen Sie Funktionen bereit und fügen Sie Funktionen in Vue3 ein: eine neue Möglichkeit, Komponentendaten zu übergeben

Mit der offiziellen Veröffentlichung von Vue3 haben viele Entwickler begonnen, die neue Version von Vue auszuprobieren. Eine der aufregendsten neuen Funktionen sind die Bereitstellungs- und Injektionsfunktionen, die die Datenübertragung zwischen Komponenten komfortabler und effizienter machen. In diesem Artikel werden die Verwendung und Vorteile der Bereitstellungsfunktion und der Injektionsfunktion vorgestellt und wie sie die Art und Weise ändern, wie Komponentendaten übergeben werden.

Verwendung der Bereitstellungsfunktion und der Injektionsfunktion

In Vue2 basiert die Datenübertragung zwischen Komponenten hauptsächlich auf Requisiten und $emit. Die übergeordnete Komponente übergibt Daten über Requisiten an die untergeordnete Komponente, und die untergeordnete Komponente übergibt die Änderungen über $emit an die übergeordnete Komponente zurück. Dieser Ansatz funktioniert gut mit einem einfachen Komponentenbaum, kann jedoch beim Aufbau komplexer Komponentenhierarchien in großen Anwendungen mühsam werden.

In Vue3 wurden die praktischeren Bereitstellungsfunktionen und Injektionsfunktionen eingeführt, mit denen Daten problemlos an alle Unterkomponenten übergeben werden können, ohne dass sie auf jeder Ebene manuell übergeben werden müssen. Werfen wir zunächst einen Blick auf die Bereitstellungsfunktion. Es wird in der übergeordneten Komponente definiert und dient zur Bereitstellung von Daten für die untergeordnete Komponente. Die Bereitstellungsfunktion akzeptiert ein Schlüssel-Wert-Paarobjekt als Parameter, das die für die untergeordnete Komponente bereitgestellten Daten enthält. Zum Beispiel:

provide() {
  return {
    currentUser: 'John Doe',
    isLoggedIn: true
  }
}

In diesem Beispiel stellt die Bereitstellungsfunktion den Namen und die Anmeldestatusdaten des aktuellen Benutzers bereit. Diese Daten können beliebiger Art sein: Zeichenfolgen, Zahlen, Objekte, Funktionen usw.

In untergeordneten Komponenten können wir die Injektionsfunktion verwenden, um auf die von der übergeordneten Komponente bereitgestellten Daten zuzugreifen. inject akzeptiert ein String-Array oder ein Objekt als Parameter und teilt Vue mit, welche Daten es injizieren möchte. Zum Beispiel:

inject: ['currentUser', 'isLoggedIn']

Jetzt können wir überall in der untergeordneten Komponente auf diese Daten zugreifen, als wären es die eigenen Daten der untergeordneten Komponente. Zum Beispiel:

console.log(this.currentUser) // John Doe
console.log(this.isLoggedIn) // true

Vorteile der Bereitstellungsfunktion und der Injektionsfunktion

Obwohl props und $emit zum Übertragen von Daten zwischen Komponenten in Vue2 verwendet werden können, hat diese Methode mehrere Nachteile. Erstens ist es umständlich: Für jede Komponente müssen Daten manuell übergeben werden, was sehr zeitaufwändig ist. Zweitens erfolgt die Datenübertragung nur in eine Richtung: Sie kann nur von der übergeordneten Komponente zur untergeordneten Komponente weitergeleitet werden. Wenn die untergeordnete Komponente die übergeordnete Komponente über Änderungen benachrichtigen möchte, muss sie dies über $emit tun. Dies führt zu Duplikaten des Codes und unnötiger Arbeit.

Verwenden Sie die Bereitstellungs- und Injektionsfunktionen, um diese Probleme zu lösen. Erstens können alle untergeordneten Komponenten auf die von der Bereitstellungsfunktion bereitgestellten Daten zugreifen und müssen nicht in jeder Komponente manuell übergeben werden. Zweitens ist diese Methode der Datenübertragung bidirektional: Untergeordnete Komponenten können Daten ändern, und diese Änderungen werden in der übergeordneten Komponente widergespiegelt. Auf diese Weise wird der Code sauberer, besser lesbar und einfacher zu warten.

Hinweise zur Bereitstellungs- und Injektionsfunktion

Obwohl die Bereitstellungs- und Injektionsfunktionen eine bequeme und effiziente Möglichkeit zum Übertragen von Daten zwischen Komponenten bieten, sind einige Vorsichtsmaßnahmen zu beachten:

1. Benutzen Sie die Bereitstellungs- und Injektionsfunktion nicht zu häufig. Dieser Ansatz kann manchmal dazu führen, dass Code schwer zu verstehen und zu debuggen ist. Es wird hauptsächlich zum Teilen des Status zwischen Komponenten verwendet, um die Verwendung von props und $emit nicht zu vermeiden.
2. Verlassen Sie sich beim Unit-Testen nicht auf die Provide-Funktion und die Inject-Funktion. Sie lassen sich in Tests nur schwer simulieren und können von Test zu Test unerwartete Auswirkungen haben.
3. Achten Sie auf die Syntax der Bereitstellungsfunktion und der Injektionsfunktion. Die Bereitstellungsfunktion gibt ein Objekt zurück, der Objektattributname gibt die Daten an, die gemeinsam genutzt werden sollen, und die Attributnamenzeichenfolge wird in der Injektionsfunktion zum Einfügen der Daten verwendet. Wenn der Eigenschaftsname nicht vorhanden ist, können die Daten nicht eingefügt werden.

Fazit

Die in Vue3 bereitgestellten Bereitstellungsfunktionen und Injektionsfunktionen bieten eine bequemere und effizientere Möglichkeit, Daten zwischen Komponenten zu übertragen. Sie ermöglichen es uns, den Status zu teilen und den Zugriff und die Änderung zu erleichtern. Allerdings müssen wir sie mit Vorsicht verwenden und sicherstellen, dass sie für den richtigen Zweck verwendet werden und keine negativen Auswirkungen auf die Prüfung haben. Durch die Verwendung der Provide- und Inject-Funktionen können wir einfachere, elegantere und leichter zu wartende Vue-Komponenten schreiben.

Das obige ist der detaillierte Inhalt vonStellen Sie Funktionen bereit und fügen Sie Funktionen in Vue3 ein: eine neue Möglichkeit, Komponentendaten zu übergeben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!