Detaillierte Erläuterung des Falls, in dem eine untergeordnete Vue-Komponente die Methode der übergeordneten Komponente aufruft

1. Rufen Sie die Methode der übergeordneten Komponente direkt über this.$parent.event in der untergeordneten Komponente auf

<!-- Übergeordnete Komponente -->
<Vorlage>
	<div>
		<Kind></Kind>
	</div>
</Vorlage>
<Skript>
importiere Kind aus „~/components/dam/child“;
Standard exportieren {
	Komponenten:
		Kind
	},
	Methoden: {
		VaterMethode() {
			Konsole.log('Test');
		}
	}
};
</Skript>

<!-- Untergeordnete Komponente -->
<Vorlage>
  <div>
    <button @click="childMethod()">Klick</button>
  </div>
</Vorlage>
<Skript>
  Standard exportieren {
    Methoden: {
      Kindmethode() {
        dies.$parent.fatherMethod();
      }
    }
  };
</Skript>

2. Verwenden Sie $emit in der untergeordneten Komponente, um ein Ereignis für die übergeordnete Komponente auszulösen. Die übergeordnete Komponente hört auf dieses Ereignis

<!-- Übergeordnete Komponente -->
<Vorlage>
	<div>
		<child @fatherMethod="fatherMethod"></child>
	</div>
</Vorlage>
<Skript>
importiere Kind aus „~/components/dam/child“;
Standard exportieren {
	Komponenten:
		Kind
	},
	Methoden: {
		VaterMethode() {
			Konsole.log('Test');
		}
	}
};
</Skript>

<!-- Untergeordnete Komponente -->
<Vorlage>
	<div>
		<button @click="childMethod()">Klick</button>
	</div>
</Vorlage>
<Skript>
Standard exportieren {
	Methoden: {
		Kindmethode () {
			dies.$emit('Vatermethode');
		}
	}
};
</Skript>

3. Die übergeordnete Komponente übergibt die Methode an die untergeordnete Komponente und ruft die Methode direkt in der untergeordneten Komponente auf

<!-- Übergeordnete Komponente -->
<Vorlage>
	<div>
		<child :VaterMethode="VaterMethode"></child>
	</div>
</Vorlage>
<Skript>
importiere Kind aus „~/components/dam/child“;
Standard exportieren {
	Komponenten:
		Kind
	},
	Methoden: {
		VaterMethode() {
			Konsole.log('Test');
		}
	}
};
</Skript>

<!-- Untergeordnete Komponente -->
<Vorlage>
	<div>
		<button @click="childMethod()">Klick</button>
	</div>
</Vorlage>
<Skript>
Standard exportieren {
	Requisiten: {
		Vatermethode: {
			Typ: Funktion,
			Standard: null
		}
	},
	Methoden: {
		Kindmethode () {
			wenn (diese.Vatermethode) {
				diese.vaterMethode();
			}
		}
	}
};
</Skript>

Damit ist dieser Artikel über den detaillierten Fall der Vue-Unterkomponente, die die Methode der übergeordneten Komponente aufruft, abgeschlossen. Weitere relevante Inhalte zur Vue-Unterkomponente, die die Methode der übergeordneten Komponente aufruft, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

Detailliertes Beispiel, wie der Wert einer untergeordneten Komponente durch Auslösen eines Ereignisses in der übergeordneten Vue-Komponente geändert werden kann
Vue-Elternkomponente ruft Funktionsimplementierung der Unterkomponente auf
Detaillierte Erklärung des Ereignisses zum Auslösen von untergeordneten Komponenten durch Klicken auf Schaltflächen in übergeordneten Komponenten in Vue
So rufen Sie untergeordnete Komponentenfunktionen in einer übergeordneten Vue-Komponente auf
Vue3.0 löst die übergeordnete Komponentenfunktion in der untergeordneten Komponente aus

<<: Ursachen und Lösungen für das Problem des verstümmelten Zeichensatzes in der MySQL-Datenbank

>>: Diagramm zum Implementierungsprozess der Linux-Jenkins-Konfigurations-Salve-Knoten