Beispiele für die Verwendung von „Provide“ und „Inject“ in Vue2.0/3.0

1. Was ist der Nutzen von Provide/Inject?

Die häufig verwendete Kommunikationsmethode zwischen übergeordneten und untergeordneten Komponenten besteht darin, dass die übergeordnete Komponente die an die untergeordnete Komponente zu übergebenden Daten bindet und die untergeordnete Komponente sie über das Props-Attribut empfängt. Sobald die Komponentenhierarchie größer wird, ist es sehr mühsam, Werte auf diese Weise Ebene für Ebene zu übergeben, und die Lesbarkeit des Codes ist nicht hoch, was für die spätere Wartung unpraktisch ist.

Vue bietet die Funktionen „Bieten“ und „Injizieren“, um uns bei der Lösung mehrstufiger verschachtelter Kommunikationsprobleme zu helfen. Geben Sie in „Provide“ die Daten an, die an die untergeordneten Komponenten übergeben werden sollen. Die untergeordneten Komponenten fügen dann die von der übergeordneten Komponente über „Inject“ übergebenen Daten ein.

Anwendungsszenario: Da Vue über die Eigenschaft $parent verfügt, können untergeordnete Komponenten auf übergeordnete Komponenten zugreifen. Für Enkelkomponenten ist es jedoch schwierig, auf Vorgängerkomponenten zuzugreifen. Über Provide/Inject können Sie problemlos auf die Daten von Vorgängerkomponenten über verschiedene Ebenen hinweg zugreifen.

2. So verwenden Sie provide/inject

provide: ist ein Objekt/eine Funktion, die ein Objekt zurückgibt.

Darin befinden sich Attribute und Attributwerte.

Hinweis: Die Bereitstellung der Nachkommenschicht deckt den Attributwert des gleichen Schlüssels in der Bereitstellung der Großelternschicht ab.

einfügen: ein Array von Zeichenfolgen oder ein Objekt.

Der Attributwert kann ein Objekt sein, einschließlich der Standardwerte „von“ und „Standard“. „Von“ ist der Schlüssel (Zeichenfolge oder Symbol), der zum Suchen im verfügbaren Injektionsinhalt verwendet wird. Dies bedeutet, dass der Großvater-Mehrschichtanbieter viele Daten bereitstellt, und das „von“-Attribut gibt an, welcher Schlüssel verwendet werden soll.

default gibt den Standardwert an.

Spezifische Verwendung:

Übergeordnete Komponente

<Vorlage>
  <div>
 
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Komponenten:
    MergeTipDialog,
    BreakNetTipp
  },
  Daten () {
    zurückkehren {
      isShow: false,
      isRouterAlive: true
  },

// Die von der übergeordneten Komponente zurückgegebenen und an die untergeordnete Komponente zu übergebenden Daten können eine Funktion oder die Daten in data provide () sein {
    zurückkehren {
      neu laden: dies.neu laden istAnzeigen: dies.istAnzeigen
    }
  },
  Methoden: {
    neu laden () {
      this.isRouterAlive = false
      dies.$nextTick(() => {
        this.isRouterAlive = true
      })
    }
  }
}
</Skript>

Nachkommen

<Vorlage>
  <Popup-Zuweisung
    :id="Ich würde"
    @success="ErfolgsHandle"
  >
    <div Klasse="confirm-d-tit"><span Klasse="gray-small-btn">{{ Name }}</span></div>
    <strong>Wird zugewiesen an</strong>
    <a
      slot="Referenz"
      Klasse="unite-btn"
    >
      Abtretung
  </popup-assign>
</Vorlage>
<Skript>
PopupAssign aus '../PopupAssign' importieren
Standard exportieren {
//Referenz Vue Reload-Methode Inhalt isShow
  einfügen: ['neu laden','isShow'],
  Komponenten:
    PopupZuweisen
  },
Methoden: {
    asynchroner Erfolgshandle () {
      dies.neu laden()
    }
  }
}
</Skript>

Vue3.0-Nutzung

Übergeordnete Komponente

Unterkomponenten

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von Provide und Inject in vue2.0/3.0. Weitere relevante Inhalte zur Verwendung von Provide und Inject in vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!