Fallzusammenfassung zur Vue-Komponentenkommunikationsmethode

1. Übergeordnete Komponente übergibt Wert an untergeordnete Komponente (Props)

Schritt:

1. Übergeben Sie Daten an untergeordnete Komponenten durch v-bind in der übergeordneten Komponente
2. Empfangen Sie Daten, die von der übergeordneten Komponente über props in der untergeordneten Komponente übergeben werden.

<div id="app">
	<!-- 1. Daten über v-bind an untergeordnete Komponenten weitergeben -->
    <test v-bind:ss='name'></test>
</div>

<Skript>
    var a = neuer Vue({
        el:'#app',
        Daten:{
            Name: „bing“,
        },
        Komponenten:
            prüfen:{
                props: ['ss'], // 2. Empfangen Sie die von der übergeordneten Komponente übergebenen Daten template: "<p>{{ss}}</p>"
            }
        }
    })
</Skript>

Props erstellt einen單向數據流zwischen übergeordneten und untergeordneten Elementen. Wenn das übergeordnete Element aktualisiert wird, ändert sich auch der Status des untergeordneten Elements entsprechend.
Im umgekehrten Fall wird der Datenfluss Ihrer Anwendung jedoch schwer verständlich, sodass die Daten in der übergeordneten Komponente in der untergeordneten Komponente nicht geändert werden können .

2. Unterkomponenten übergeben Werte an übergeordnete Komponenten ($emit)

Die untergeordnete Komponente sendet über das Ereignis $emit eine Nachricht an die übergeordnete Komponente und übergibt ihre eigenen Daten an die übergeordnete Komponente.

Schritt:

1. Binden Sie ein click an die untergeordnete Komponente, um increment Inkrementmethode auszulösen
2. Verwenden Sie in der increment $emit um ein benutzerdefiniertes increment zu definieren und den Parameter this.counter zu übergeben.
3. Binden Sie das benutzerdefinierte increment in Schritt 2 an die übergeordnete Komponente. Der Methodenname lautet incrementTotal
4. Rufen Sie die Methode incrementTotal in Schritt 3 in der übergeordneten Komponente auf. Anschließend kann incrementTotal die von der untergeordneten Komponente übergebenen Parameter empfangen.

<div id="app">
    <p>{{ insgesamt }}</p>
    <button-counter v-on:increment="incrementTotal"></button-counter> <!-- Schritt 3 -->
</div>

<Skript>
    Vue.component('Schaltflächenzähler', {
        Vorlage: '<button v-on:click="increment">{{ counter }}</button>', // Schritt 1
        Daten: Funktion () {
            zurückkehren {
                Zähler: „Unterkomponentendaten“
            } 
        },
        Methoden: {
            Inkrement: Funktion () {
                this.$emit('increment', this.counter); // Schritt 2
            }
        }
    });


    neuer Vue({
        el: '#app',
        Daten: {
            total: 'Daten der übergeordneten Komponente:'
        },
        Methoden: {
            incrementTotal: Funktion (e) { // Schritt 4
                dies.gesamt = dies.gesamt + e[0]
                konsole.log(e);
            }
        }
    })
</Skript>

3. Brother-Komponentenwertübertragung (EventBus)

Wenn Sie für die Datenkommunikation zwischen Komponenten keine Bibliothek wie Vuex benötigen, können Sie für die Kommunikation den EventBus in Vue verwenden .

In Vue kann EventBus als Kommunikationsbrücke verwendet werden, genau wie alle Komponenten dasselbe Ereigniscenter gemeinsam nutzen und sich registrieren können, um Ereignisse vom Center zu senden oder zu empfangen, sodass Komponenten andere Komponenten parallel benachrichtigen können.
Es ist jedoch zu praktisch, sodass es bei unachtsamer Verwendung zu einer „Katastrophe“ führt, die schwer zu verwalten ist. Daher ist ein umfassenderes Vuex als Statusverwaltungszentrum erforderlich, um das Benachrichtigungskonzept auf die Ebene des gemeinsamen Status zu heben.

Mit dieser Methode wird eine leere Vue-Instanz als Verarbeitungszentrum (Ereignisbus) des $emit-Ereignisses erstellt, über das Ereignisse ausgelöst und abgehört werden können. Außerdem wird bequem die Kommunikation zwischen allen Komponenten realisiert, einschließlich übergeordneten und untergeordneten Komponenten, Geschwisterkomponenten und Komponenten zwischen Generationen. Die Einzelheiten lauten wie folgt:

1. Initialisierung (new Vue())

Zuerst müssen Sie den Ereignisbus erstellen und exportieren, damit andere Module ihn verwenden oder abhören können.
Wir können dies auf zwei Arten handhaben.

Methode 1: Erstellen Sie eine neue Datei event-bus.js

// event-bus.js
Vue von „vue“ importieren
exportiere const EventBus = neuer Vue()

Methode 2: EventBus direkt in main.js des Projekts initialisieren

// Haupt.js
Vue.prototype.$EventBus = new Vue() // Hinweis: Auf diese Weise initialisierter EventBus ist ein globaler Eventbus

Nachdem wir nun EventBus erstellt haben, müssen Sie ihn nur noch in Ihre Komponente laden und dieselbe Methode aufrufen, die Sie zum Übergeben von Nachrichten zwischen übergeordneten und untergeordneten Komponenten verwendet haben.

2. Senden von Ereignissen ($emit())

Angenommen, es gibt zwei Vue-Seiten, die kommunizieren müssen: A und B. Auf Seite A ist ein Klickereignis an die Schaltfläche gebunden und eine Nachricht wird gesendet, um Seite B zu benachrichtigen.

<!-- A.vue -->
<Vorlage>
    <button @click="sendMsg()">-</button>
</Vorlage>

<Skript> 
importiere { EventBus } aus "../event-bus.js";
Standard exportieren {
  Methoden: {
    sendMsg() {
      EventBus.$emit("aMsg", 'Nachricht von Seite A'); // Daten extern senden}
  }
}; 
</Skript>

3. Ereignisse empfangen ($on())

Als Nächstes müssen Sie diese Nachricht auf Seite B erhalten.

<!-- B.vue -->
<Vorlage>
	<p>{{msg}}</p>
</Vorlage>

<Skript> 
importiere { EventBus } aus "../event-bus.js";
Standard exportieren {
	Daten() {
		zurückkehren {
			Nachricht: ''
		}
	},
	montiert() {
		EventBus.$on("aMsg", (msg) => { // Empfange die von A gesendete Nachricht this.msg = msg;
		});
	}
};
</Skript>

4. Entfernen Sie Ereignis-Listener

Wie bereits erwähnt, kann EventBus bei unsachgemäßer Verwendung eine Katastrophe sein. Um welche Art von „Katastrophe“ handelt es sich? Jeder weiß, dass Vue eine Einzelseitenanwendung ist. Wenn Sie eine Seite aktualisieren, wird der zugehörige EventBus entfernt, was dazu führt, dass das Geschäft gestoppt wird. Wenn das Unternehmen außerdem über Seiten verfügt, die wiederholt betrieben werden, wird EventBus bei der Überwachung viele Male ausgelöst, was ebenfalls eine sehr große versteckte Gefahr darstellt. Zu diesem Zeitpunkt müssen wir die Beziehung zwischen EventBus und dem Projekt ordnungsgemäß handhaben. Es wird normalerweise verwendet, um EventBus-Ereignislistener zu entfernen, wenn die Vue-Seite zerstört wird.

Wenn Sie den Ereignislistener entfernen möchten, können Sie dies folgendermaßen tun:

importiere { EventBus } aus "../event-bus.js";
EventBus.$off('aMsg', {})

EventBus.$off('aMsg') entfernt alle Listener für dieses Ereignis in der Anwendung.
Oder Sie können EventBus.$off() direkt aufrufen, um alle Ereigniskanäle zu entfernen, ohne Parameter hinzuzufügen.

4. Vuex

Beim Erstellen mittlerer bis großer Einzelseitenanwendungen, z. B. solcher, die eine kollaborative Entwicklung durch mehrere Personen und eine globale Verwaltung des Anmeldestatus erfordern, wählen Sie für die Statusverwaltung am besten Vuex.

Vuex-Portal mit ausführlichen Erklärungen

Dies ist das Ende dieses Artikels über die Fallzusammenfassung der Kommunikationsmethoden von Vue-Komponenten. Weitere relevante Zusammenfassungen der Kommunikationsmethoden von Vue-Komponenten 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!