Welche Methoden verwenden übergeordnete Vue-Komponenten, um untergeordnete Komponenten aufzurufen?

Dieses Mal werde ich Ihnen die Methoden zum Aufrufen von Unterkomponenten durch Vue-Elternkomponenten vorstellen. Was sind die Vorsichtsmaßnahmen, wenn Vue-Elternkomponenten Unterkomponenten aufrufen? .

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

ref="refName", Methode der untergeordneten Komponente zum Verarbeiten des Uploads in: this.$refs.refName.method

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

<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);
},

Die übergeordnete Vue-Komponente übergibt Ereignisse/Aufrufereignisse an die untergeordnete Komponente

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

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

So erreichen Sie die Ergebnishervorhebung während der globalen Suche

Eine ausführliche Erläuterung des Anwendungsfalls des Router-Attributs von Angular4

Das obige ist der detaillierte Inhalt vonWelche Methoden verwenden übergeordnete Vue-Komponenten, um untergeordnete Komponenten aufzurufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!