Heim > Web-Frontend > js-Tutorial > So bedienen Sie die übergeordnete Vue-Komponente, um die untergeordnete Komponente aufzurufen

So bedienen Sie die übergeordnete Vue-Komponente, um die untergeordnete Komponente aufzurufen

php中世界最好的语言
Freigeben: 2018-05-26 10:48:59
Original
1149 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie die übergeordnete Vue-Komponente zum Aufrufen der untergeordneten Komponente bedienen. Was sind die Vorsichtsmaßnahmen für die Verwendung der übergeordneten Vue-Komponente zum Aufrufen der untergeordneten Komponente? , lass uns einen Blick darauf werfen.

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

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();
  }    
},
Nach dem Login kopieren
Vorlage 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>
Nach dem Login kopieren
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);
},
Nach dem Login kopieren
Zu diesem Zeitpunkt können Sie übergeben. Mit der Schaltfläche „Hochladen“ wird das Bild im ersten Modul der Unterkomponente platziert.

Lass uns Sehen Sie, wie die übergeordnete Vue-Komponente das Ereignis der Unterkomponente aufruft

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

, anstatt Daten (Requisiten) zu übergeben. . Gilt für 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

Kind Komponente:

export default {
  mounted: function () {
   this.$nextTick(function () {
    this.$on('childMethod', function () {
     console.log('监听成功')
    })
   })
  },
  methods {
    callMethod () {
     console.log('调用成功')
    }
  }
}
Nach dem Login kopieren
Ü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
  }
}
Nach dem Login kopieren
Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie den Diff-Algorithmus in Vue


Analyse der zugrunde liegenden Logik von JavaScript EventEmitter

Das obige ist der detaillierte Inhalt vonSo bedienen Sie die übergeordnete Vue-Komponente, um die untergeordnete Komponente aufzurufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage