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

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

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

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

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
  }
}

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!