Wie ruft die übergeordnete Vue-Komponente die untergeordnete Komponente auf?

Dieses Mal zeige ich Ihnen, wie die übergeordnete Vue-Komponente die untergeordnete Komponente aufruft. Das Folgende ist ein praktischer Fall sehen.

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",this.$refs.refName.methodVorlage der übergeordneten Komponente

Definieren Sie die Methode in der

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

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

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

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

Sehen wir uns an, wie die übergeordnete Vue-Komponente das Ereignis der Unterkomponente aufruft

Die übergeordnete Vue-Komponente übergibt Ereignisse/ruft Ereignisse an untergeordnete Komponenten aufEs werden keine Daten übergeben (Requisiten). ), gilt für Vue 2.0

Methode 1: Die untergeordnete Komponente lauscht auf die sendende Methode der übergeordneten Komponente

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

Untergeordnete Komponente :

Übergeordnete Komponente:

Ich glaube, ich habe es gesehen. Sie haben die Methode in diesem Artikel gemeistert. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln Artikel auf der chinesischen PHP-Website!

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

Empfohlene Lektüre:

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

Yuansheng JS implementiert Datei-Drag-Ereignis

Detaillierte Erläuterung der Verwendung globaler lokaler Vue-Komponenten

Das obige ist der detaillierte Inhalt vonWie ruft die übergeordnete Vue-Komponente die untergeordnete Komponente auf?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!