So verwenden Sie Provide/Inject in Vue, um Daten über mehrere Ebenen von Vorfahren und Nachkommen zu übergeben

Vue bietet eine effiziente Datenübertragungsmethode – Bereitstellen/Injizieren, die uns dabei helfen kann, Daten zwischen Vorfahren und Nachkommen über mehrere Ebenen hinweg zu übertragen und so eine umständliche Übertragung von Requisiten zu vermeiden. In diesem Artikel wird erläutert, wie Sie mit Provide/Inject in Vue eine Datenübertragung über mehrere Schichten von Vorfahren und Nachkommen hinweg erreichen.

1. Provide und inject

provide und inject sind neue APIs nach der Vue2.2.0-Version, die zur Realisierung der Datenübertragung über mehrschichtige Komponenten hinweg verwendet werden. Provide ermöglicht es einer Komponente, eine Abhängigkeit in alle ihre Nachkommenkomponenten einzufügen, und Inject kann diese Abhängigkeit empfangen und verwenden.

provide und inject werden hauptsächlich für Plug-In-/Komponentenbibliotheken höherer Ordnung wie Element-UI verwendet. In element-ui hängen alle Komponenten von einer Komponentenbibliothek der obersten Ebene ab. Diese Komponentenbibliothek muss allen Unterkomponenten Bereitstellung und Injektion ermöglichen, um diese Daten zu übertragen.

2. Die Verwendung von Provide und Inject

Durch die Verwendung von Provide in einer Komponente können wir einen Injektionspunkt für untergeordnete Komponenten bereitstellen, damit diese die von der übergeordneten Komponente bereitgestellten Daten erhalten können. Zum Beispiel:

// 父组件
export default {
  provide () {
    return {
      theme: this.theme
    }
  },
  data () {
    return {
      theme: 'light'
    }
  }
}

// 子组件
export default {
  inject: ['theme'],
  mounted () {
    console.log(this.theme) // light
  }
}

Im obigen Beispiel verwendet die übergeordnete Komponente „prove“, um Daten bereitzustellen und das Datenobjekt für untergeordnete Komponenten verfügbar zu machen. Die Daten sind hier ein Zeichenfolgentyp. Die Möglichkeit zur Bereitstellung besteht in der Verwendung der Bereitstellungsfunktion. Laut der offiziellen Dokumentation von Bereitstellung ist der Rückgabewert dieser Funktion ein Objekt. Der Schlüssel im Objekt kann beim Einfügen von Nachkommen verwendet werden, und der Wert sind die einzufügenden Daten, bei denen es sich um eine Variable, eine Funktion usw. handeln kann.

Durch die Injektion in untergeordnete Komponenten können wir Daten empfangen, die von übergeordneten Komponenten bereitgestellt werden. Zum Beispiel:

export default {
  inject: ['theme'],
  mounted () {
    console.log(this.theme) // light
  }
}

Im Beispiel empfängt die untergeordnete Komponente Daten mithilfe der Injektionsoption in den Komponentenoptionen. „inject: [key]“, wobei key der Schlüssel des Datenobjekts ist, das in der übergeordneten Komponente verfügbar gemacht werden soll. Der Schlüssel hier stimmt mit dem überein, der von der Bereitstellungsfunktion bereitgestellt wird. Es ist zu beachten, dass die Abhängigkeit standardmäßig im übergeordneten Element gesucht wird. Wenn Sie nicht im übergeordneten Element suchen möchten, müssen Sie srcoll im inject auf „false“ setzen. Nur von der übergeordneten Komponente bereitgestellte Daten können von der untergeordneten Komponente eingefügt werden.

3. Hinweise zu Provide und Inject

1. Die von Provide injizierten Daten können in untergeordneten Komponenten verwendet werden, jedoch nicht in der übergeordneten Komponente.

Im Mechanismus von Provide und Inject können die von Provide bereitgestellten Daten durch Inject in untergeordnete Komponenten eingefügt werden. Wenn inject jedoch auch in der übergeordneten Komponente zum Empfangen von Daten verwendet wird, wird dies nicht wirksam, da inject standardmäßig in der übergeordneten Komponente nach den bereitgestellten Daten sucht und Vue in der übergeordneten Komponente nicht nach einer Konsistenz mit der untergeordneten Komponente sucht Komponenten bereitstellen.

2. Verwenden Sie in Provide keine Pfeilfunktionen, um Daten zurückzugeben.

provide muss ein Objekt zurückgeben, um Daten bereitzustellen, daher verwenden wir häufig Pfeilfunktionen, um ein Objekt zurückzugeben, zum Beispiel:

export default {
  provide: () => ({
    theme: 'light'
  })
}

In den meisten Fällen verwenden wir jedoch keine Pfeilfunktionen, um Daten bereitzustellen, da Pfeilfunktionen dies nicht tun habe diesen Punkt. Bei Verwendung von Pfeilfunktionen in Provide erhält es nicht den richtigen Kontext und reagiert nicht auf Datenänderungen.

3. Es wird nicht empfohlen, in Provide und Inject Namen zu verwenden, die mit dem $-Symbol beginnen.

Das Benennen, das mit dem $-Symbol in Provide und Inject beginnt, ist eine Benennungsregel, die Vue vorbehalten ist. Wir empfehlen daher nicht, das $-Symbol zum Starten der bereitgestellten Daten zu verwenden. Die Verwendung von Namen, die mit dem $-Symbol in „prove“ beginnen, kann zu Problemen führen, während die Verwendung von Namen, die mit dem $-Symbol in „inject“ beginnen, ignoriert wird.

4. Nutzungsszenarien

Der Hauptzweck von Provide/Inject besteht darin, eine Komponentenbibliothek über Komponentenebenen hinweg aufzubauen. Insbesondere teilen mehrere Komponenten einige der gleichen Informationen oder den gleichen Status, wie z. B. Designfarbe, Sprache usw.

Im tatsächlichen Entwicklungsprozess kann man sich leicht ein Szenario vorstellen: In einer App oder einer Seite können viele ähnliche Komponenten vorhanden sein, die denselben Status oder dieselbe Methode verwenden müssen. Hierarchien vermitteln diese gemeinsamen Informationen und den Status und vermeiden so redundanten Code und Doppelarbeit.

Gleichzeitig können wir Mixins auch verwenden, um Codeduplizierung und Coderedundanz zu vermeiden, wodurch unser Code elegant, sauber und leicht zu warten ist.

5. Zusammenfassung

Die Verwendung von Provide/Inject ist eine effiziente Datenübertragungsmethode, die uns dabei helfen kann, die Datenübertragung über mehrere Ebenen von Vorfahren und Nachkommen hinweg zu realisieren und den Einsatz von Requisiten zu reduzieren. Es ist jedoch zu beachten, dass bei der Verwendung von Provide/Inject einige Vorsichtsmaßnahmen zu beachten sind, um eine Beeinträchtigung der Leistung und Korrektheit der Komponente zu vermeiden. Gleichzeitig erfordert die tatsächliche Anwendung eine detaillierte Analyse der Szenarien und den sinnvollen Einsatz von Provide/Inject, Props oder Vuex für die Datenübertragung.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Provide/Inject in Vue, um Daten über mehrere Ebenen von Vorfahren und Nachkommen zu übergeben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!