Erfahren Sie mehr über „Bereitstellen/Injizieren' in Vue

Dieser Artikel vermittelt Ihnen das Wissen über „Bereitstellen/Injizieren in Vue“ und hofft, Freunden in Not helfen zu können ein Attribut: inject. Dann habe ich die offizielle Website Provider/Inject überprüft: Einfach ausgedrückt wird die Variable über Provider in der übergeordneten Komponente bereitgestellt und dann über Inject in die untergeordnete Komponente eingefügt.

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

• Hier sind wir. Sorgen Sie dafür Variable in der übergeordneten Komponente.

Sekunde definiert eine Unterkomponente

<template>
  <p>
<childOne></childOne>
  </p>
</template>

<script>
  import childOne from &#39;../components/test/ChildOne&#39;
  export default {
    name: "Parent",
    provide: {
      for: "demo"
    },
    components:{
      childOne
    }
  }

• Dritte definiert eine weitere Unterkomponente

<template>
  <p>
    {{demo}}
    <childtwo></childtwo>
  </p>
</template>

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

• In den beiden Unterkomponenten verwenden wir jnject, um die von Provide bereitgestellte Variable einzufügen und sie dem Datenattribut bereitzustellen.
  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

<template>
  <p>
    {{demo}}
  </p>
</template>

<script>
  export default {
    name: "",
    inject: [&#39;for&#39;],
    data() {
      return {
        demo: this.for
      }
    }
  }
</script>

Wie aus dem obigen Beispiel ersichtlich ist, solange es im aufgerufen wird übergeordnete Komponente, dann in Während des Lebenszyklus dieser übergeordneten Komponente können alle untergeordneten Komponenten inject aufrufen, um den Wert in die übergeordnete Komponente einzufügen.

Verwandte Empfehlungen:

vue 2 Verwenden von Bus.js zur Implementierung der Nicht-Eltern-Kind-Komponentenkommunikation

Chat-Beispiel basierend auf Vue .js und Webpack

Best Practices für Vue.js (fünf Tipps, um Sie zum Vue.js-Meister zu machen)

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über „Bereitstellen/Injizieren' in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!