Anwendungsfallanalyse von Bereitstellung/Injektion in Vue

Dieses Mal bringe ich Ihnen eine Anwendungsfallanalyse von Provide/Inject in Vue. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Provide/Inject in Vue?

Vorwort

Ich habe mir kürzlich den Quellcode von element-ui angesehen und ein solches Attribut:inject gefunden. Dann habe ich den Beamten überprüft Website-Provider/Inject

Provider/Inject: Um es einfach auszudrücken: Stellen Sie Variablen über Provider in der übergeordneten Komponente bereit und injizieren Sie die Variablen dann über Inject in die untergeordnete Komponente.

Es ist zu beachten, dass unabhängig von der Tiefe der Unterkomponente die Daten im Anbieter injiziert werden können, solange „inject“ aufgerufen wird. Anstatt sich darauf zu beschränken, Daten nur aus dem prop-Attribut der aktuellen übergeordneten Komponente abzurufen.

Lassen Sie uns unsere Vermutung überprüfen:

zuerst: Definieren Sie eine übergeordnete Komponente

<template>
 <p>
<childOne></childOne>
 </p>
</template>
<script>
 import childOne from '../components/test/ChildOne'
 export default {
  name: "Parent",
  provide: {
   for: "demo"
  },
  components:{
   childOne
  }
 }

Hier stellen wir diese Variable in der übergeordneten Komponente bereit.

Zweite definiert eine Unterkomponente

<template>
 <p>
  {{demo}}
  <childtwo></childtwo>
 </p>
</template>
<script>
 import childtwo from './ChildTwo'
 export default {
  name: "childOne",
  inject: ['for'],
  data() {
   return {
    demo: this.for
   }
  },
  components: {
   childtwo
  }
 }
</script>

Dritte definiert eine weitere Unterkomponente

<template>
 <p>
  {{demo}}
 </p>
</template>
<script>
 export default {
  name: "",
  inject: ['for'],
  data() {
   return {
    demo: this.for
   }
  }
 }
</script>

In den beiden Unterkomponenten verwenden wir jnject, um die von Provide bereitgestellte Variable einzufügen und sie Provided zu den Daten hinzuzufügen Attribut.

Auf der offiziellen Website heißt es, dass die Beispiele nur mit Vue 2.2.1 oder höher funktionieren. Unterhalb dieser Version wird der injizierte Wert erhalten, nachdem Requisiten und Daten initialisiert wurden.

Überprüfen Sie die Ergebnisse nach der Ausführung

Wie aus dem obigen Beispiel ersichtlich ist, wird dies der Fall sein, solange es in der übergeordneten Komponente aufgerufen wird in der übergeordneten Komponente wirksam werdenIm Lebenszyklus können alle untergeordneten Komponenten inject aufrufen, um den Wert in die übergeordnete Komponente einzufügen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zum Hinzufügen, Löschen und Ändern von JavaScript-DOM-Elementen

Vue verwendet Vee -Validieren, um das Formular im Detail zu überprüfen

Das obige ist der detaillierte Inhalt vonAnwendungsfallanalyse von Bereitstellung/Injektion in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!