Zusammenfassung der Methoden zum Aufrufen untergeordneter Komponenten durch die übergeordnete Vue-Komponente

Dieses Mal werde ich Ihnen eine Zusammenfassung der Methoden zum Aufrufen von Unterkomponenten aus übergeordneten Vue-Komponenten geben. Was sind die Vorsichtsmaßnahmen für übergeordnete Vue-Komponenten zum Aufrufen von Unterkomponenten? Werfen wir einen Blick darauf.

Szenario:

Die übergeordnete Komponente führt die Unterkomponente von

Hochladen Anhang ein: Klicken Sie auf die Komponente, um sie hochzuladen Die entsprechenden Anforderungen bzw. Bilder, interne Schleifen von Unterkomponenten können mehrere Module erstellen.

Übergeordnete Komponenten werden in Arrays an Schleifen von Unterkomponenten übergeben, um verschiedene Komponentenmodule zu erstellen. Komponenten.

Es gibt auch eine Schaltfläche zum Hochladen von Bildern oben auf der übergeordneten Komponentenseite. Nach dem Hochladen des Bildes wird es im ersten Modul angezeigt:

Imagine Idea: Klicken Sie auf die Schaltfläche in der übergeordneten Komponente, um die Upload-Methode in der untergeordneten Komponente auszulösen:

Verwenden Sie

in der Methode der definierten übergeordneten Komponente auf der untergeordneten Komponente, um die Methode der untergeordneten Komponente aufzurufen

Methode der untergeordneten Komponente zum Verarbeiten des Uploads in: ref="refName",

 fileClick(index) {
   console.log('子组件的fileClick被调用了')
   console.log('index:  '+index)
   // this.aaa();
   if(!this.fileInfor[index].imgUrl){
   //如果当前框里没有图片,则实现上传
   document.getElementsByClassName('upload_file')[index].click();
  }    
},

this.$refs.refName.methodVorlage der übergeordneten Komponente

<template>
  <x-button type="submit" class="custom-primary" @click.native="xiechengUpload">上传图片</x-button>
  <up-load :fileInformation="fileInformation" ref="uploadRef"></up-load>
</template>

Definieren Sie die Methode in der Methode der übergeordneten Komponente und Übergeben Sie den entsprechenden Indexwert.

Upload(){
  // console.log('父组件的xiechengUpload被调用了')
  this.$refs.uploadRef.fileClick(0);
},

Zu diesem Zeitpunkt können Sie mit der Schaltfläche „Upload“ das Bild im ersten Modul der Unterkomponente platzieren.

Mal sehen, wie Die übergeordnete Vue-Komponente ruft das Ereignis der Unterkomponente auf.

Die übergeordnete Vue-Komponente übergibt Ereignisse/Aufrufereignisse an die untergeordnete Komponente , anstatt Daten (Requisiten) zu übergeben zu Vue 2.0

Methode 1: Die untergeordnete Komponente hört auf die von der übergeordneten Komponente gesendete Methode

Methode 2: Die übergeordnete Komponente ruft die Methode der untergeordneten Komponente auf

Untergeordnete Komponente:

export default {
  mounted: function () {
   this.$nextTick(function () {
    this.$on('childMethod', function () {
     console.log('监听成功')
    })
   })
  }，
  methods {
    callMethod () {
     console.log('调用成功')
    }
  }
}

Übergeordnete Komponente:

<child ref="child" @click="click"></child>
export default {
  methods: {
   click () {
   this.$refs.child.$emit('childMethod') // 方法1
   this.$refs.child.callMethod() // 方法2
  },
  components: {
   child: child
  }
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Element-Traversal-Implementierung der Element-Traversierung

Detaillierte Erläuterung der Schritte zur Übergabe von Werten ​​von der übergeordneten Vue-Komponente zur übergeordneten Komponente

Das obige ist der detaillierte Inhalt vonZusammenfassung der Methoden zum Aufrufen untergeordneter Komponenten durch die übergeordnete Vue-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!