Detaillierte Erläuterung der Schritte zur Verwendung von Provide/Inject in Vue

Dieses Mal werde ich Ihnen die Schritte zur Verwendung von Provide/Inject in Vue ausführlich erläutern. 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, nachdem Sie es ausgeführt haben

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte achten Sie darauf zu anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man Vue verwendet, um das 2048-Minispiel zu implementieren

Wie man Vee-Validate verwendet Vue

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Verwendung von Provide/Inject in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!