Die übergeordnete Vue-Komponente ruft Methoden und Ereignisse der untergeordneten Komponente auf

In diesem Artikel werden hauptsächlich relevante Informationen zum Aufrufen von Unterkomponentenmethoden und -ereignissen vorgestellt. Die übergeordnete Komponente durchläuft die Array-Unterkomponentenschleife, um verschiedene Komponentenmodule zu erstellen Implementieren Sie eine solche Funktion

Szenario:

Die übergeordnete Komponente führt die Unterkomponente zum Hochladen von Anhängen ein: Klicken Sie auf die Komponente, um die entsprechenden hochzuladen Erforderliche Bilder innerhalb der Unterkomponentenschleifen können mehrere Module erstellen

Die übergeordnete Komponente übergibt das Array an die untergeordnete Komponentenschleife, um verschiedene Komponentenmodule zu erstellen

Oben auf der Seite der übergeordneten Komponente befindet sich eine Schaltfläche zum Hochladen des Bildes. Nach dem Hochladen des Bildes wird es im ersten Modul angezeigt:

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

Verwenden Sie ref="refName", in der Methode der übergeordneten Komponente, die für die untergeordnete Komponente definiert ist, um die untergeordnete Komponente aufzurufen. Komponentenmethode this.$refs.refName.method

Methode zum Verarbeiten des Uploads in der Unterkomponente:

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

Vorlage für übergeordnete 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);
},

An dieser Stelle können Sie Fügen Sie das Bild über die Schaltfläche „Hochladen“ in das erste Modul der Unterkomponente ein.

Sehen wir uns die übergeordnete Vue-Komponente an, die untergeordnete Komponentenereignisse aufruft

Vue-Elternkomponente übergibt Ereignisse/Aufruf von Ereignissen an untergeordnete Komponenten

Es werden keine Daten (Requisiten) übergeben.

Methode 1: Die untergeordnete Komponente lauscht 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:

rrree

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft nützlich sein.

Verwandte Artikel:

Detaillierte Erläuterung der Darstellung von Seitenressourcen durch NodeJS durch Antwortrückschreiben

Vue-Dropdown-Listenfunktionsbeispiel Code

Detaillierte Erläuterung von Angular2-Modulen und gemeinsam genutzten Modulen

Das obige ist der detaillierte Inhalt vonDie übergeordnete Vue-Komponente ruft Methoden und Ereignisse der untergeordneten Komponente auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!