Analysieren Sie die Verwendung und Prinzipien von Vues Bereitstellung und Injektion

1. Die übergeordnete Komponente stellt die Parameter bereit, die an die untergeordnete Komponente übergeben werden sollen provide() {
    zurückkehren {
      Listentyp: dieser.Listentyp,
    }
  }
2. Verwendung von Unterkomponenten:
einfügen: ['Listentyp'],

injizieren:{
  Listentyp: {
  von: „par“ // geben Sie den definierten Namen an Standard: 1
  }
}

Exportfunktion bereitstellen<T>(Schlüssel: InjectionKey<T> | Zeichenfolge | Zahl, Wert: T) {
  wenn (!aktuelleInstanz) {
    wenn (__DEV__) {
      warnen(`provide() kann nur innerhalb von setup() verwendet werden.`)
    
    }
  } anders {
    //Holen Sie sich die Provides der aktuellen Komponente. Die Standardinstanz erbt das Provides-Objekt der übergeordneten Klasse. let provides = currentInstance.provides
    //Verwenden Sie das übergeordnete bereitgestellte Objekt als Prototyp, um Ihr eigenes bereitgestelltes Objekt zu erstellen const parentProvides =
      currentInstance.parent und currentInstance.parent.provides
    wenn (parentProvides === bietet) {
      bietet = aktuelleInstanz.bietet = Objekt.erstellen(übergeordnetesAngebot)
    }
    liefert [Schlüssel als Zeichenfolge] = Wert
  }
}
​

Exportfunktion injizieren (
  Schlüssel: InjectionKey<beliebig> | Zeichenfolge,
  Standardwert?: unbekannt,
  TreatDefaultAsFactory = falsch
) {
  //Aktuelle Komponenteninstanz abrufen const instance = currentInstance || currentRenderingInstance
  wenn (Instanz) {
  //Get bietet
    const bietet =
      Instanz.übergeordnet == null
        ? Instanz.vnode.appContext und Instanz.vnode.appContext.provides
        : Instanz.übergeordnetes Element.bietet
​
    if (bietet && (Schlüssel als Zeichenfolge | Symbol) in bietet) {
      //Wenn der Schlüssel existiert, liefert die Rückgabe direkt [Schlüssel als String]
    } sonst wenn (Argumente.Länge > 1) {
      //Wenn der Schlüssel nicht existiert, legen Sie den Standardwert fest und geben Sie den Standardwert direkt zurück return TreatDefaultAsFactory && isFunction(defaultValue)
        ? Standardwert.Aufruf(Instanz.Proxy)
        : Standardwert
    } sonst wenn (__DEV__) {
      //Wenn keines davon gefunden wird, warne(`injection "${String(key)}" nicht gefunden.`)
    }
  } sonst wenn (__DEV__) {
    warnen(`inject() kann nur innerhalb von setup() oder funktionalen Komponenten verwendet werden.`)
  }
}
​