Verwendung von Provide und Inject in Vue3

1. Erklärung von provide und inject

Mit „Bereitstellen“ und „Einfügen“ können Daten zwischen verschachtelten Komponenten übertragen werden.
Beide Funktionen werden in der Setup-Funktion verwendet.
Die übergeordnete Komponente verwendet provide, um Daten nach unten weiterzugeben.
Die untergeordnete Komponente verwendet „Inject“, um die von der übergeordneten Komponente übergebenen Daten abzurufen.
Es ist zu beachten, dass:
1==>provide kann Daten nur nach unten weitergeben
2 ==> Wenn Sie provide und inject verwenden, müssen Sie aus vue importieren

2. Verwendung von provide und inject

Wir werden 2 Komponenten erstellen: die Unterkomponente ErZi.vue
Enkelkomponente SunZI.vue
Wir werden Daten von der übergeordneten Komponente an ihre untergeordneten Komponenten weitergeben.
Dann erhalten es sowohl der Sohn als auch der Enkel.
Und zeigen Sie es in der Ansicht an

3. Übergeordnete Komponente

<Vorlage>
  <erzi-com></erzi-com>
</Vorlage>
<script lang="ts">
importiere ErZi aus "../components/ErZi.vue"
importiere {provide, ref} von "vue"
Standard exportieren {
  Name:"Über",
  Komponenten: {
    'erzi-com':ErZi
  },
  aufstellen(){
    geben Sie SunziData = ref ({
       mit:100,
       Höhe: 50,
       bg:'rosa'
    })
    // Der erste Parameter ist der Name der freigegebenen Daten (giveSunzi)
    // Der zweite Parameter sind die freigegebenen Daten (giveSunziData)
    bereitstellen('giveSunzi',giveSunziData)
  }
}
</Skript>

Die übergeordnete Komponente übergibt ein Objekt an ihre untergeordnete Komponente.
provide wird in der setUp-Kombinations-API verwendet
So verwenden Sie provide:
provide ('gemeinsamer Datenname', gemeinsamer Wert)
Gemeinsam genutzte Werte können Zeichenfolgen, Zahlen, Objekte, Arrays sein

Wenn die Unterkomponente empfängt;
let xxx=inject('gemeinsam genutzter Datenname');

4. Sohnkomponente

<Vorlage>
    <div>
      <h2>Sohn-Komponenten</h2>
      <div>Wert abrufen: {{getFaytherData}}</div>
    </div>
    <hr/>
    <Sonne-con></Sonne-con>
</Vorlage>
<script lang="ts">
importiere { defineComponent, inject } von „vue“;
importiere SunZI aus "./SunZI.vue"
exportiere StandarddefiniereKomponente({
  Name: 'ErZi',
   Komponenten: {
     'Sun-con':SunZI
   },
    aufstellen(){
      let getFaytherData = inject('giveSunzi');
      return { getFaytherData }
    }
});
</Skript>

5. Enkelkind-Komponente

<Vorlage>
    <div>
         <h2>Enkelkomponenten</h2>
         <div>Der erhaltene Wert ist {{getYeYeData}}</div>
    </div>
</Vorlage>
<script lang="ts">
importiere { defineComponent, inject } von „vue“;
exportiere StandarddefiniereKomponente({
   aufstellen(){
     Lassen Sie getYeYeData = inject('giveSunzi');
    zurückgeben { getYeYeData }
   }
});
</Skript>

6. Darstellung

7. Kann eine übergeordnete Komponente mehrere Provider übergeben?

Manchmal muss unsere übergeordnete Komponente mehrere Anforderungen erfüllen.
Weil wir die Daten getrennt halten wollen.
Zu diesem Zeitpunkt müssen Sie mehrere Provider passieren.
Nach dem Üben kann die übergeordnete Komponente mehrere Router passieren! ! ! !
Dies stellt kein Problem dar.

Ich persönlich empfehle diesen Ansatz jedoch nicht. Wir können bei der Übergabe mehrere Daten auf einmal zusammenstellen.
Nach der Montage, Übertragung

8. Referenzszenarien von provide und inject

Wenn die übergeordnete Komponente viele Daten an die untergeordneten Komponenten verteilen muss,
Sie können „Provide“ und „Inject“ verwenden.

Dies ist das Ende dieses Artikels über die Verwendung von Provide und Inject in Vue3. Weitere relevante Inhalte zur Verwendung von Vue Provide und Inject 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!