Vue-Komponentenkommunikation: Abhängigkeitsinjektion mit Provide/Inject-PHP-Tutorial-php.cn

Vue-Komponentenkommunikation: Abhängigkeitsinjektion mit Provide/Inject

PHPz

Freigeben： 2023-07-07 13:06:02

Original

1134 Leute haben es durchsucht

Vue-Komponentenkommunikation: Verwenden Sie Provide/Inject für die Abhängigkeitsinjektion

In der Vue-Entwicklung ist die Komponentenkommunikation eine wichtige und häufige Anforderung. Vue bietet verschiedene Möglichkeiten für die Kommunikation von Komponenten, darunter die Abhängigkeitsinjektion von Komponenten mithilfe von Provide/Inject.

provide und inject sind zwei verwandte Optionen in Vue. Sie können verwendet werden, um Daten oder Methoden in übergeordneten Komponenten bereitzustellen und diese in untergeordnete Komponenten einzufügen. Im Vergleich zu anderen Komponentenkommunikationsmethoden bietet Provide/Inject einige einzigartige Funktionen und Vorteile.

Zuallererst werden bei der Verwendung von Provide/Inject für die Abhängigkeitsinjektion Daten oder Methoden in der übergeordneten Komponente bereitgestellt und in der untergeordneten Komponente injiziert. Dadurch wird die Komponentenkommunikation über mehrere Ebenen hinweg einfacher und komfortabler. Wir müssen Daten nicht Schicht für Schicht durch Requisiten leiten, sondern Daten über „Bereitstellen“ an Unterkomponenten bereitstellen und dann die Daten in der Unterkomponente durch „Injizieren“ abrufen.

Zweitens ist Provide/Inject eine API auf relativ niedriger Ebene, die eine flexiblere Möglichkeit der Komponentenkommunikation bieten kann. Durch Bereitstellung/Injektion können wir jede Art von Daten oder Methode in der übergeordneten Komponente bereitstellen, einschließlich Objekten, Funktionen und sogar Instanzen. Dies ermöglicht es uns, Daten und Methoden freier zwischen Komponenten auszutauschen, anstatt nur einfache Requisiten und Emission durchzuführen.

Schauen wir uns als Nächstes ein Beispiel für die Abhängigkeitsinjektion mithilfe von „prove/inject“ an.

Angenommen, wir haben eine übergeordnete Komponente App.vue und eine untergeordnete Komponente Child.vue. Wir müssen in der untergeordneten Komponente Daten und eine Methode verwenden.

<!-- App.vue -->
<template>
  <div>
    <child></child>
  </div>
</template>
<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    showMessage() {
      alert(this.message);
    }
  },
  provide() {
    return {
      message: this.message,
      showMessage: this.showMessage
    };
  }
}
</script>

Nach dem Login kopieren

<!-- Child.vue -->
<template>
  <div>
    <button @click="showMessage">Show Message</button>
  </div>
</template>
<script>
export default {
  inject: ['message', 'showMessage']
}
</script>

Nach dem Login kopieren

Im obigen Beispiel stellen wir der untergeordneten Komponente die Eigenschaften „message“ und „showMessage“ über die Methode „prove“ bereit. In der Unterkomponente injizieren wir diese beiden Eigenschaften über die Injektionsoption und können sie dann direkt in der Unterkomponente verwenden.

In der untergeordneten Komponente Child.vue hören wir über das @click-Ereignis auf das Click-Ereignis des Elements