Wie übergebe ich Werte zwischen übergeordneten und untergeordneten Vue-Komponenten? Einführung in Kommunikationsmethoden

Vue ist ein häufig verwendetes Front-End-Entwicklungsframework, und die Idee der Komponentisierung ist der Kern von Vue. Der Kern der Komponentisierungsidee besteht darin, Komponenten in Komponenten aufzuteilen, um komplexe Komponenten übersichtlicher und leichter wartbar zu machen. Was wir zu diesem Zeitpunkt tun möchten, ist die Kommunikation zwischen diesen Komponenten. Die Übergabe von Methoden von übergeordneten Komponenten an untergeordnete Komponenten ist eine wichtige Technologie. In diesem Artikel wird erläutert, wie Methoden zwischen Vue-Komponenten übergeben werden, insbesondere von übergeordneten Komponenten an untergeordnete Komponenten.

1. Übergabemethoden für übergeordnete Komponenten

Zunächst gibt es in Vue viele Möglichkeiten, Methoden von übergeordneten Komponenten an untergeordnete Komponenten zu übergeben.

Zuerst definieren wir eine Methode in der übergeordneten Komponente:

methods: {
    hello(){
        console.log('hello');
    }
}

Als nächstes müssen wir diese Methode an die untergeordnete Komponente übergeben. In Vue können übergeordnete Komponenten Daten und Methoden über Requisiten an untergeordnete Komponenten übergeben.

In der übergeordneten Komponente müssen wir die Übergabemethode wie folgt vervollständigen:

<child-component :hello="hello"></child-component>

In der untergeordneten Komponente müssen wir die von der übergeordneten Komponente übergebene Methode über Requisiten empfangen:

props: {
    hello: Function
}

Dann müssen wir aufrufen es in der untergeordneten Komponente Methode:

<button @click="hello()">Click me</button>

Auf diese Weise können wir die von der übergeordneten Komponente übergebene Methode erfolgreich in der untergeordneten Komponente aufrufen.

2. Unterkomponente übergibt Methoden an übergeordnete Komponente

Als nächstes stellen wir vor, wie Unterkomponenten Methoden an übergeordnete Komponenten übergeben. Verglichen mit der Art und Weise, wie die übergeordnete Komponente Methoden an die untergeordnete Komponente übergibt, ist diese Methode komplizierter.

Zuerst definieren wir in der untergeordneten Komponente eine Methode:

methods: {
    send(){
        this.$emit('demo-event');
    }
}

Hier definieren wir eine Sendemethode, die über $emit ein Ereignis namens „demo-event“ auslöst. Es ist zu beachten, dass wir bei der Übergabe von Methoden in Vue nicht die Funktion selbst direkt, sondern über Ereignisse übergeben.

Als nächstes müssen wir das Ereignis in der übergeordneten Komponente abhören. Der spezifische Code lautet wie folgt:

<child-component @demo-event="handleDemo"></child-component>

Hier verwenden wir @demo-event, um das von der untergeordneten Komponente ausgelöste Ereignis „demo-event“ abzuhören Definieren Sie es in der übergeordneten Komponente. Es wird eine Ereignisbehandlungsfunktion handleDemo erstellt.

Als nächstes müssen wir die handleDemo-Methode in der übergeordneten Komponente definieren:

methods: {
    handleDemo(){
        console.log('demo event received');
    }
}

Auf diese Weise wird beim Auslösen der Sendemethode in der untergeordneten Komponente das Ereignis „demo-event“ und die handleDemo-Methode ausgelöst ausgeführt werden.

3. Zusammenfassung

Durch die beiden oben genannten Methoden können wir Methoden zwischen Vue-Komponenten übergeben und die Kommunikation abschließen, um die Wiederverwendung von Komponenten und die Aufteilung komplexer Seiten zu erreichen. In tatsächlichen Projekten verwenden wir diese Methode häufig zur Kommunikation zwischen Komponenten.

Es ist zu beachten, dass Methoden in Vue über Ereignisse übergeben werden, was auch ein sehr wichtiges Konzept bei der Vue-Komponentisierung ist. Gleichzeitig müssen Sie bei Verwendung dieser Methode auch darauf achten, dass die Namen der in der übergeordneten Komponente und der untergeordneten Komponente definierten Methoden identisch sind, um sicherzustellen, dass das Ereignis erfolgreich ausgelöst werden kann.

Das obige ist der detaillierte Inhalt vonWie übergebe ich Werte zwischen übergeordneten und untergeordneten Vue-Komponenten? Einführung in Kommunikationsmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!