Verwendung und Prinzipien von Provide und Inject in Vue3

Vorwort:

Beim Übergeben von Daten zwischen übergeordneten und untergeordneten Komponenten werden normalerweise Props und Emitt verwendet. Beim Übergeben von Daten von übergeordneten an untergeordnete Komponenten werden Props verwendet. Wenn die übergeordnete Komponente sie an die untergeordnete Komponente übergibt, müssen sie zuerst an die untergeordnete Komponente übergeben werden, und dann übergibt die untergeordnete Komponente sie an die untergeordnete Komponente. Wenn mehrere untergeordnete Komponenten oder mehrere untergeordnete Komponenten verwendet werden, müssen sie viele Male übergeben werden, was sehr problematisch sein wird.

In solchen Fällen können Sie provide und inject verwenden, um dieses Problem zu lösen. Unabhängig davon, wie tief die Komponenten verschachtelt sind, kann die übergeordnete Komponente Daten für alle untergeordneten Komponenten oder Enkelkomponenten bereitstellen. Die übergeordnete Komponente verwendet provide , um Daten bereitzustellen, und die untergeordneten oder Enkelkomponenten inject um Daten einzufügen. Gleichzeitig ist es bequemer, Werte zwischen Bruderkomponenten zu übertragen.

1. Verwendung von provide / inject in Vue2

provide: ist ein Objekt, das Eigenschaften und Werte enthält. wie:

bieten:{

 info:"Wert"

}

Wenn provide die Daten in data verwenden muss, führt das Schreiben auf diese Weise zu einem Fehler. Wenn Sie auf property einer Komponenteninstanz zugreifen, müssen Sie provide in eine Funktion umwandeln, die ein Objekt zurückgibt.

bieten(){

 zurückkehren {

  Info: diese.msg

 }

}

inject : ist ein Array von Zeichenfolgen. wie:

einfügen: [ 'info' ]

Empfängt die von provide oben bereitgestellten Infodaten, die auch ein Objekt mit from- und default-Attributen sein können. From ist der Schlüssel, der zum Suchen im eingefügten Inhalt verwendet wird, und das default-Attribut dient zum Angeben des Standardwerts.

Im Vue2-Projekt/Inject-Anwendung:

//Übergeordnete Komponente exportiert standardmäßig{

 bieten:{

  info:"Daten bereitstellen"

 }

}

//Unterkomponente Export Standard{

 injizieren:['info'],

 montiert(){

     console.log("Daten empfangen:", this.info) // Daten empfangen: Daten bereitstellen}

}

provide / inject ähnelt dem Abonnieren und Veröffentlichen von Nachrichten. provide stellt Daten bereit oder sendet sie, inject empfängt Daten.

2. Verwendung von provide / inject in Vue3

Verwenden Sie provide/inject in der kombinierten API . Beide können nur während setup aufgerufen werden. Vor der Verwendung müssen Sie provide/inject -Methode explizit aus vue importieren.

Die Provide-Funktion erhält zwei Parameter:

provide( name,value )


• name : Definiert name der bereitgestellten property .
• value : der Wert property .

Bei Verwendung von:

importiere { biete } von "vue"

Standard exportieren {

  aufstellen(){

    bereitstellen('Info',"Wert")

  }

}

Die Injektionsfunktion verwendet zwei Parameter:

inject(name,default)

• name : Erhält den vom provide bereitgestellten Attributnamen.
• default : Legen Sie den Standardwert fest. Dies ist optional.

Bei Verwendung von:

importiere { inject } von "vue"

Standard exportieren {

  aufstellen(){

    inject('info',"Standardwert festlegen")

  }

}

Vollständiges Beispiel 1 : Beispiel provide/inject

//Code der übergeordneten Komponente <script>

importiere { biete } von "vue"

Standard exportieren {

  aufstellen(){

    bereitstellen('Info',"Wert")

  }

}

</Skript>

//Unterkomponentencode <Vorlage>

 {{Info}}

</Vorlage>

<Skript>

importiere { inject } von "vue"

Standard exportieren {

  aufstellen(){

    const info = injizieren('info')

    zurückkehren {

      Info

    }

  }

}

</Skript>

3. Reagieren Sie schneller

Um provide/inject Reaktionsfähigkeit hinzuzufügen, verwenden Sie ref oder reactive .

Vollständiges Beispiel 2 : Responsive provide/inject

//Code der übergeordneten Komponente <template>

  <div>

    Die Info: {{info}}

    <InjectCom ></InjectCom>

  </div>

</Vorlage>

<Skript>

importiere InjectCom aus "./InjectCom"

importiere { provide, readonly, ref } von "vue"

Standard exportieren {

  aufstellen(){

    let info = ref("Hast du heute gelernt?")

    setzeTimeout(()=>{

      info.value = "Suchen Sie keine Ausreden, fangen Sie jetzt an zu lernen"

    },2000)

    bereitstellen('Info',Info)

    zurückkehren {

      Info

    }

  },

  Komponenten: {

    InjectCom

  }

}

</Skript>

// InjectCom-Unterkomponentencode <template>

 {{Info}}

</Vorlage>

<Skript>

importiere { inject } von "vue"

Standard exportieren {

  aufstellen(){

    const info = injizieren('info')

    setzeTimeout(()=>{

      info.value = "Aktualisieren"

    },2000)

    zurückkehren {

      Info

    }

  }

}

</Skript>

Im obigen Beispiel wird der info sowohl in der übergeordneten als auch in der untergeordneten Komponente geändert.

provide / inject ähnelt dem Abonnieren und Veröffentlichen von Nachrichten und folgt dem unidirektionalen Datenfluss in vue . Was bedeutet das? Das heißt, die Daten können nur dort geändert werden, wo sie sich befinden. Eine Änderung der Daten zum Zeitpunkt ihrer Übertragung ist nicht möglich, was leicht zu unvorhersehbaren Zuständen führen kann.

Wenn Sie den Wert in der Abonnementkomponente ändern, kann er normal geändert werden. Wenn andere Komponenten den Wert ebenfalls verwenden, kann es zu einer Statusverwechslung kommen. Daher ist es notwendig, das Problem an der Quelle zu vermeiden.

readonly ist eine schreibgeschützte Funktion, die vor der Verwendung eingeführt werden muss. Wenn einer Variable das Attribut readonly hinzugefügt wird, können die Daten nur gelesen, aber nicht geändert werden. Bei einer Änderung wird eine Warnung ausgegeben, der Wert wird jedoch nicht geändert.

Anwendung:

importiere { schreibgeschützt } von "vue"

let info = readonly('Nur-Lese-Infowert')

setTimout(()=>{

 info="Update info" //Aktualisiere den Wert von info nach zwei Sekunden},2000)

Nach einer Laufzeit von zwei Sekunden gibt der Browser eine Warnung aus, dass der Infowert nicht geändert werden kann.

Daher fügen wir den vom provide ausgegebenen Daten ein schreibgeschütztes Attribut hinzu, um zu verhindern, dass die ausgegebenen Daten geändert werden.

Fügen Sie „readonly“ hinzu, um es im vollständigen Beispiel 2 bereitzustellen.

bereitstellen('Info', schreibgeschützt(Info))

Wenn eine Unterkomponente den Wert ändert, wird eine schreibgeschützte Erinnerung ausgegeben.

Wenn Sie den Wert ändern, müssen Sie weiterhin die Daten in der Komponente ändern, die die veröffentlichten Daten provide . Daher wird der Komponente eine Änderungsmethode hinzugefügt und gleichzeitig veröffentlicht, die in der untergeordneten Komponente aufgerufen werden kann.

wie:

//Veröffentlichen let info = ref("Hast du heute gelernt?")

const changeInfo = (Wert)=>{

 info.Wert = Wert

}

bereitstellen('Info',schreibgeschützt(Info))

bereitstellen('changeInfo',changeInfo)



//Abonnement const chang = inject('changeInfo')

ändern (,,Eile zum Frontend-Ingenieur')

Vollständiges Beispiel 3: Daten ändern

// Code der übergeordneten Komponente <template>

  <div>

    Die Info: {{info}}

    <InjectCom ></InjectCom>

  </div>

</Vorlage>



<Skript>

importiere InjectCom aus "./InjectCom"

importiere { provide, readonly, ref } von "vue"

Standard exportieren {

  aufstellen(){

    let info = ref("Hast du heute gelernt?")

    const changeInfo = (Wert)=>{

      info.Wert = Wert

    }

    bereitstellen('Info',schreibgeschützt(Info))

    bereitstellen('changeInfo',changeInfo)

    zurückkehren {

      Info

    }

  },

  Komponenten: {

    InjectCom

  }

}

</Skript>



//InjectCom-Unterkomponentencode <Vorlage>

  <div>

    <button @click="chang('Zum Frontend-Ingenieur eilen')">Wert aktualisieren</button>

  </div>

</Vorlage>

<Skript>

importiere { inject } von "vue"

Standard exportieren {

  aufstellen(){

    const info = injizieren('info')

    const chang = inject('changeInfo')

    zurückkehren {

      Info,

      Ändern

    }

  }

}

</Skript>
 

Dies ist das Ende dieses Artikels über die Verwendung und Prinzipien von provide und inject in vue3 . Weitere relevante Inhalte zu Provide und Inject in Vue3 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!