Über Kommunikationsprobleme in Vue.js-Komponenten

Vorab geschrieben

Da ich mich sehr für Vue.js interessiere und der Technologie-Stack, an dem ich normalerweise arbeite, auch Vue.js ist, habe ich einige Zeit damit verbracht, den Quellcode von Vue.js zu studieren In den letzten Monaten wurden eine Zusammenfassung und eine Ausgabe erstellt.

Was sind Vue-Komponenten?

Komponente ist eine der leistungsstärksten Funktionen von Vue.js. Komponenten können HTML-Elemente erweitern und wiederverwendbaren Code kapseln. Auf einer hohen Ebene ist eine Komponente ein benutzerdefiniertes Element, dem der Compiler von Vue.js spezielle Funktionen hinzufügt. Teilweise können Komponenten auch in Form nativer HTML-Elemente vorliegen, erweitert um das Attribut is.

Kommunikation zwischen Vue-Komponenten

Übergeordnete Komponente kommuniziert mit untergeordneter Komponente

Methode 1: Requisiten

Verwendung von Requisiten, der übergeordneten Komponente kann Requisiten verwenden, um Daten an untergeordnete Komponenten zu übergeben.

Vue-Vorlage für die übergeordnete Komponente Father.vue

<template>
    <child :msg="message"></child>
</template>

<script>

import child from &#39;./child.vue&#39;;

export default {
    components: {
        child
    },
    data () {
        return {
            message: &#39;father message&#39;;
        }
    }
}
</script>

Vue-Vorlage für die untergeordnete Komponente child.vue

<template>
    <p>{{msg}}</p>
</template>

<script>
export default {
    props: {
        msg: {
            type: String,
            required: true
        }
    }
}
</script>

Methode 2 verwendet $children

verwenden $children kann auf untergeordnete Komponenten innerhalb der übergeordneten Komponente zugreifen.

Die untergeordnete Komponente kommuniziert mit der übergeordneten Komponente

Methode 1: Vue-Ereignisse verwenden

Die übergeordnete Komponente übergibt die Ereignismethode an die untergeordnete Komponente und das untergeordnete Element Komponente löst das Ereignis durch $emit Callback an die übergeordnete Komponente aus.

Vue-Vorlage für die übergeordnete Komponente Father.vue

<template>
    <child @msgFunc="func"></child>
</template>

<script>

import child from &#39;./child.vue&#39;;

export default {
    components: {
        child
    },
    methods: {
        func (msg) {
            console.log(msg);
        }
    }
}
</script>

Vue-Vorlage für die untergeordnete Komponente child.vue

<template>
    <button @click="handleClick">点我</button>
</template>

<script>
export default {
    props: {
        msg: {
            type: String,
            required: true
        }
    },
    methods () {
        handleClick () {
            //........
            this.$emit(&#39;msgFunc&#39;);
        }
    }
}
</script>

Methode 2: Ändern Sie, indem Sie die vom übergeordneten Element übergebenen Requisiten ändern Komponente Daten der übergeordneten Komponente

Diese Methode kann nur verwendet werden, wenn die übergeordnete Komponente eine Referenzvariable übergibt. Literale Variablen können den entsprechenden Effekt nicht erzielen. Da die Trinkvariable letztendlich auf dieselbe Speicheradresse verweist, unabhängig davon, ob es sich um die Daten in der übergeordneten Komponente oder um die Daten in den von der untergeordneten Komponente erhaltenen Requisiten handelt, werden durch Ändern der Daten in den Requisiten in der untergeordneten Komponente auch die Daten in der übergeordneten Komponente geändert Komponente.

Es wird jedoch nicht empfohlen, den Wert von Requisiten direkt zu ändern. Wenn die Daten zur Anzeige von Änderungen verwendet werden, füge ich sie häufig in Daten ein und gebe sie zurück Bei Bedarf verwendet die übergeordnete Komponente dann Ereignisse, um Daten zurückzugeben. Dadurch bleiben die Komponenten unabhängig und entkoppelt und es kommt nicht zu einer abnormalen Datenflussverwirrung aufgrund der Verwendung derselben Daten. Daten werden nur über bestimmte Schnittstellen übertragen, um die Daten zu ändern, und der interne Datenstatus wird durch spezielle Daten verwaltet.

Methode 3: Verwenden Sie $parent

Verwenden Sie $parent, um auf die Daten der übergeordneten Komponente zuzugreifen.

Datenübertragung zwischen Nicht-Eltern-Kind-Komponenten und Geschwisterkomponenten

Für die Kommunikation von Nicht-Eltern-Kind-Komponenten empfiehlt Vue offiziell die Verwendung einer Vue-Instanz als zentralen Ereignisbus.

Vue verfügt über einen internen Ereignismechanismus, Sie können auf den Quellcode verweisen.

Die $on-Methode wird verwendet, um auf ein Ereignis zu warten.

$emit wird verwendet, um ein Ereignis auszulösen.

/*新建一个Vue实例作为中央事件总嫌*/
let event = new Vue();

/*监听事件*/
event.$on('eventName', (val) => {
    //......do something
});

/*触发事件*/
event.$emit('eventName', 'this is a message.');

Mehrstufige Eltern-Kind-Komponentenkommunikation:

In Vue1.0 sind zwei Methoden, $broadcast und $dispatch, implementiert, um an untergeordnete Komponenten zu senden (oder zu versenden) ( oder übergeordnete Komponenten) ), wenn die untergeordnete Komponente (oder übergeordnete Komponente) auf das Ereignis wartet und „true“ zurückgibt, wird das Ereignis weiterhin an die Komponente auf Enkelebene gesendet (oder gesendet). Diese Methode wurde jedoch in Vue2.0 entfernt.

Als ich das Open-Source-Komponentenbibliothekselement von Ele.me studierte, stellte ich fest, dass sie die Broadcast- und Dispatch-Methoden neu implementiert und in Form von Mixin eingeführt haben. Weitere Informationen finden Sie unter „Über Element sprechen“. Komponentenbibliothek-Broadcast und -Versand“. Es unterscheidet sich jedoch geringfügig von den beiden Methodenimplementierungen von Vue1.0. Diese beiden Methoden implementieren die Funktionen der Ereignisübertragung an untergeordnete Komponenten und der Ereignisverteilung an übergeordnete Komponenten mit mehreren Ebenen. Es handelt sich jedoch nicht um eine Ereignisübertragung im weiteren Sinne. Es muss ein Kommentarname angegeben werden, um Ereignisse an die Komponente mit dem angegebenen Komponentennamen zu senden (senden).

Tatsächlich verwendet die interne Implementierung dieser beiden Methoden immer noch $parent und $children, die zum schrittweisen Durchlaufen untergeordneter Knoten oder zum Abfragen übergeordneter Knoten verwendet werden. Wenn auf den angegebenen Komponentennamen zugegriffen wird, lautet $emit Wird aufgerufen, um das Specify-Ereignis auszulösen.

Komplexe einseitige Anwendungsdatenverwaltung

Wenn die Anwendung komplex genug ist, verwenden Sie bitte vuex für die Datenverwaltung.

Das obige ist der detaillierte Inhalt vonÜber Kommunikationsprobleme in Vue.js-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!