Dieses Mal werde ich Ihnen einen praktischen Fall des Aufrufs einer Unterkomponente durch eine übergeordnete Vue-Komponente vorstellen. Werfen wir einen Blick darauf.
Szenario: Die übergeordnete Komponente führt die Unterkomponente von
HochladenAnhang 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: 
Verwenden Sie
fileClick(index) {
console.log('子组件的fileClick被调用了')
console.log('index: '+index)
// this.aaa();
if(!this.fileInfor[index].imgUrl){
//如果当前框里没有图片,则实现上传
document.getElementsByClassName('upload_file')[index].click();
}
},ref="refName",Vorlage der übergeordneten Komponentethis.$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);
},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('调用成功')
}
}
}<child ref="child" @click="click"></child>
export default {
methods: {
click () {
this.$refs.child.$emit('childMethod') // 方法1
this.$refs.child.callMethod() // 方法2
},
components: {
child: child
}
}Detaillierte Erläuterung der Schritte zur dynamischen Implementierung von Kreisdiagrammen mit HTML5+Canvas
Detaillierte Erläuterung der Schritte dazu Verwenden Sie pushState und replaceState
Das obige ist der detaillierte Inhalt vonDer praktische Fall, dass Vue die übergeordnete Komponente als untergeordnete Komponente aufruft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
