So verwenden Sie die übergeordnete Vue-Komponente zum Aufrufen der untergeordneten Komponente (Code im Anhang)

Dieses Mal zeige ich Ihnen, wie Sie die übergeordnete Vue-Komponente zum Aufrufen der Unterkomponente verwenden (mit Code). Das Folgende ist ein praktischer Fall sehen.

Szenario:

Die übergeordnete Komponente führt eine Unterkomponente zum Hochladen von Anhängen ein: Klicken Sie auf die Komponente, um jeweils die entsprechenden erforderlichen Bilder hochzuladen. und die interne Schleife der Unterkomponente. Es können mehrere Module erstellt werden.

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

Es gibt auch eine Schaltfläche zum Hochladen von Bildern oben auf der Seite der übergeordneten Komponente. 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

in der Methode der übergeordneten Komponente, die für die untergeordnete Komponente definiert ist, um die untergeordnete Komponente aufzurufen Methode

ref="refName", Methode zur Verarbeitung des Uploads in der Unterkomponente: this.$refs.refName.method

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

Zu diesem Zeitpunkt können Sie das Bild über die Schaltfläche „Hochladen“ in das erste Modul der untergeordneten Komponente einfügen.

Sehen wir uns an, wie die übergeordnete Vue-Komponente das Kind aufruft Komponentenereignisse

Vue-Elternkomponente übergibt Ereignisse/ruft Ereignisse an untergeordnete Komponenten auf

Es geht nicht um die Übergabe von Daten (Requisiten), es 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

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. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Verwenden Sie postman+json+springmvc, um Batch-Ergänzungen vorzunehmen

So verpacken Sie die Webpack 4.0-Optimierung

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die übergeordnete Vue-Komponente zum Aufrufen der untergeordneten Komponente (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!