Detaillierte Erklärung der Kommunikation zwischen hierarchisch verschachtelten Komponenten in der Vue-Frontend-Entwicklung

Vorwort

Übergeordnete und untergeordnete Vue-Komponenten können den Wert der übergeordneten Komponente problemlos über Requisiten an die untergeordnete Komponente weitergeben. Wenn eine Komponente in mehreren Schichten verschachtelt ist, muss jede Schicht den Wert mit denselben Requisiten weitergeben, was mühsam und schwer zu verwalten ist.

Beispiel

[Beispiel] Komponente A verwendet Komponente B und Komponente B verwendet Komponente C. Komponente C muss den Datentext und die Methode getmethod von Komponente A verwenden. Der Code der Komponente A lautet wie folgt:

<Vorlage>
  <div>
    <P>Dies ist Komponente A</P>
    <v-Kamm></v-Kamm>
  </div>
</Vorlage>
<Skript>
  importiere comB aus '@/view/comB.vue'
  Standard exportieren {
    Name: 'comA',
    Komponenten:
      'v-Kamm': KammB
    },
    Daten() {
      zurückkehren {
        msg: 'Ich bin die Daten in Komponente A'
      }
    },
    provide: function() { //Eigenschaften und Methoden in untergeordnete Komponenten einfügen return {
        Text: diese.Nachricht,
        getMethod: Funktion() {
          console.log('Führen Sie die Methode getMethod in der Stammkomponente aus.')
        }
      }
    }
  }
</Skript>

Verwenden Sie das Schlüsselwort provide, um Daten und Methoden für untergeordnete Komponenten verfügbar zu machen
Komponente B ist eine untergeordnete Komponente von Komponente A und eine übergeordnete Komponente von Komponente C. Der Code lautet wie folgt

<Vorlage>
  <div>
    <div>
      <P>Dies ist Komponente B</P>
      <v-comc></v-comc>
    </div>
  </div>
</Vorlage>
<Skript>
  importiere comC aus '@/view/comC.vue'
  Standard exportieren {
    Name: 'comB',
    Komponenten:
      'v-comc': comC
    }
  }
</Skript>

Komponente C ist das Enkelkind von Komponente A. Komponente C muss die Daten und Methoden von Komponente A verwenden. Der Code lautet wie folgt:

<Vorlage>
  <div style="border:1px durchgezogen orange;color:orange;">
    <div>
      <P>Dies ist eine C-Komponente</P>
      <div>{{text}}</div>
      <button @click="getMethod">Übergeordnete Komponentenmethode aufrufen</button>
    </div>
  </div>
</Vorlage>
<Skript>
  Standard exportieren {
    Name: 'comC',
    inject: ['text', 'getMethod'] //text und getMethod sind die vom Anbieter bereitgestellten Namen}
</Skript>

Das Schlüsselwort inject wird hier verwendet, um die von Komponente A bereitgestellten Informationen zu empfangen. Achten Sie hierbei besonders darauf, dass der in inject: [] empfangene Name exakt mit dem von provide bereitgestellten Namen übereinstimmen muss.

Ausführen. Die Schnittstelle ist wie unten gezeigt

Zusammenfassung

Für die mehrstufige verschachtelte Komponentenkommunikation verwendet Vue die Schlüsselwörter provide & inject, um Werte direkt von übergeordneten Komponenten an untergeordnete Komponenten zu übertragen, was sehr praktisch ist. Es besteht eine starke Kopplungsbeziehung zwischen der problematischen Unterkomponente und der übergeordneten Komponente und es wird nicht empfohlen, sie zu verwenden, es sei denn, dies ist unbedingt erforderlich.

Oben finden Sie den ausführlichen Inhalt der detaillierten Erklärung zur Kommunikation hierarchisch verschachtelter Komponenten in der Vue-Frontend-Entwicklung. Weitere Informationen zur Kommunikation hierarchisch verschachtelter Komponenten in Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!