So verwenden Sie Provide/Inject in Vue, um den Methodentransfer zwischen Vorgängerkomponenten und Nachkommenkomponenten zu implementieren

Vue bietet als beliebtes Front-End-Framework eine Vielzahl von Methoden zum Organisieren und Verwalten von Interaktionen zwischen Komponenten. In Vue sind Provide und Inject zwei Methoden, mit denen die Methodenübertragung zwischen Vorgängerkomponenten und Nachkommenkomponenten implementiert werden kann.

provide und inject sind Methoden zur Kommunikation zwischen erweiterten Komponenten, die von Vue bereitgestellt werden. Ihre Funktion besteht darin, Daten für Vorgängerkomponenten bereitzustellen und dann die Injektionsmethode zu verwenden, um Daten in Nachkommenkomponenten zu empfangen.

1. Definition von Provide und Inject

Provide und Inject sind neue Funktionen in Vue.js 2.2.0+. Sie sind Alternativen für die Kommunikation zwischen übergeordneten und untergeordneten Komponenten.

Die Bereitstellungsoption kann ein Objekt oder eine Funktion sein, die ein Objekt zurückgibt, und ihre Rolle besteht darin, die von Ihnen bereitgestellten Daten zu definieren. Die Injektionsoption kann ein Array oder ein Objekt sein, wobei das Array-Mitglied eine Zeichenfolge ist, die die Eigenschaft darstellt, die Sie injizieren müssen. Der Schlüssel des Objektmitglieds stellt den Namen der lokalen Bindung dar und der Schlüsselwert ist der von bereitgestellte Schlüssel seine übergeordnete Komponente.

2. Verwendungsszenarien von Provide und Inject

Die Verwendung von Provide und Inject kann in den folgenden Szenarien verwendet werden:

• Kommunikation zwischen mehrstufigen verschachtelten Komponenten;
• Vermeiden Sie die Verwendung von vuex für die einfache Statusverwaltung.
• Verwenden Sie vuex, um den globalen Zustand zu verwalten und das Problem der Zustandsverwaltung zwischen mehreren Komponenten zu lösen. Für einfache Zustandsverwaltungsszenarien ist es jedoch einfacher und effektiver, Kommunikationsmethoden bereitzustellen und einzufügen.

3. Implementierung von Provide und Inject

Das Folgende ist ein Beispiel zur Einführung der Implementierung von Provide und Inject:

Verwenden Sie in der übergeordneten Komponente App.vue die Provide-Methode, um die Methode setData:

1. <template>
     <div>
       <child-comp :setData="setData"></child-comp>
     </div>
   </template>
   
   <script>
   import ChildComp from './ChildComp.vue';
   
   export default {
     components: {
       ChildComp
     },
     provide() {
       return {
         setData: this.setData
       }
     },
     data() {
       return {
         text: 'Hello World'
       }
     },
     methods: {
       setData() {
         this.text = 'Vue.js is awesome';
       }
     }
   }
   </script>

   Nach dem Login kopieren
bereitzustellen

In der untergeordneten Komponente ChildComp.vue verwenden Sie die Methode inject, um die Methode setData zu empfangen und die Methode setData in der Komponente aufzurufen:

2. <template>
     <div>
       <button @click="setData()">修改文本</button>
     </div>
   </template>
   
   <script>
   export default {
     inject: ['setData']
   }
   </script>

   Nach dem Login kopieren

Klicken Sie auf die Schaltfläche in der untergeordneten Komponente und ändern Sie den Text in der übergeordneten Komponente durch Aufrufen die setData-Methode, die von der Eigenschaft der übergeordneten Komponente bereitgestellt wird.

3. 4. Hinweise zu Provide und Inject

Obwohl die Verwendung von Provide und Inject einfach und bequem ist, müssen Sie auf die folgenden Punkte achten:

Provide und Inject reagieren nicht Änderungen, die untergeordnete Komponente Es wird nicht automatisch aktualisiert.

• Sie müssen auf den Namenskonflikt zwischen Provide und Inject achten, um zu verhindern, dass Namenskonflikte Datenübertragungsfehler verursachen.
• Die von Provide und Inject injizierten Attribute werden in anderen Vorfahren verwendet sind unterschiedlich, daher müssen Sie auf die Quelle der Attribute achten.
• 5. Zusammenfassung

In diesem Artikel wird erläutert, wie Sie Provide und Inject in Vue verwenden, um den Methodentransfer zwischen Vorgängerkomponenten und Nachkommenkomponenten zu implementieren. Durch die Verwendung von Provide und Inject kann eine einfache Komponentenkommunikation erreicht, die Verwendung der einfachen Statusverwaltung von Vuex vermieden und die Entwicklungseffizienz verbessert werden. Sie müssen jedoch beachten, dass „provide“ und „inject“ nicht reagieren, und Sie müssen auf den Namenskonflikt zwischen „provide“ und „inject“ achten.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Provide/Inject in Vue, um den Methodentransfer zwischen Vorgängerkomponenten und Nachkommenkomponenten zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!