Mehrere Möglichkeiten für Vue, die Kommunikation zwischen Komponenten zu erreichen (mehrere Szenarien)

Im Folgenden sind die Kommunikationsmethoden zwischen Vue-Komponenten aufgeführt, die ich bei der Entwicklung verwendet habe. Unterschiedliche Szenarien verwenden unterschiedliche Methoden, die grundsätzlich die Kommunikationsanforderungen in allen Entwicklungsszenarien erfüllen. Beginnend mit dem einfachsten Beispiel werde ich erklären, wie es verwendet wird. Ich werde ohne weitere Umschweife beginnen. Es ist voller trockener Ware und es wird empfohlen, es zu lesen.

1. Requisiten

Übergeordnetes Element >>> Untergeordnetes Element (Requisiten)

Wenn eine Komponente in eine andere Komponente eingeführt wird, entsteht eine „Eltern-Kind-Beziehung“. Die aktuelle Komponente ist die „Elternkomponente“ und die eingeführte Komponente ist das „Kind“. Beispielsweise kommuniziert die aktuelle Komponente (Elternkomponente) mit der Kindkomponente über „:message“ in der Elternkomponente.

<Vorlage>
    <div Klasse="übergeordnete Box">
        <div>
            <div>Ich bin die übergeordnete Seite</div>
            <div>{{Nachricht}}</div>
        </div>
        <Kinder: Nachricht = "toChildrenMsg"></Kinder>
    </div>
</Vorlage>
 
<Skript>
importiere Children von './Children.vue' //Führe Unterkomponenten in die aktuelle Seite ein exportiere Standard {
    Name: „Übergeordnetes Element“,
    Komponenten: {
        Kinder
    },
    Daten(){
        zurückkehren {
            Nachricht: „Ich bin der Inhalt der übergeordneten Seite“,
            toChildrenMsg: „Inhalt wird von der übergeordneten Seite an die untergeordnete Seite weitergegeben“
        }
    }
}
</Skript>

Die untergeordnete Komponente empfängt es über props . Beachten Sie, dass der Name des in den props der untergeordneten Komponente empfangenen Objekts mit dem Namen übereinstimmen muss, der an die untergeordnete Komponente in der übergeordneten Komponente gebunden ist. Das aktuelle Beispiel ist „message“. Der Wert in den props kann auf diese Weise in der Komponentenrückgabe verwendet werden.

<Vorlage>
    <div Klasse="Kinder-Box">
        <div>
            <div>Ich bin eine Unterseite</div>
            <div>{{Nachricht}}</div>
        </div>
    </div>
</Vorlage>
 
<Skript>
Standard exportieren {
    Name:"Kinder",
    Requisiten:{
        Nachricht:{
            Typ:String, //Typbeurteilung Standard:'' //Standardwert}
    }
}
</Skript>

Die untergeordnete Komponente empfängt den von der übergeordneten Komponente übergebenen Inhalt. Die Auswirkung ist wie in der folgenden Abbildung dargestellt:

Kind >>> Elternteil ($emit)

Kommunizieren Sie in der untergeordneten Komponente mit der übergeordneten Komponente über die Methode this.$emit(). Klicken Sie wie unten gezeigt auf das Triggerereignis und führen Sie this.$emit('fromChildMethod') aus, um die Methode fromChildMethod der übergeordneten Komponente auszulösen.

<Vorlage>
    <div Klasse="Kinder-Box">
        <div>
            <div>Ich bin eine Unterseite</div>
            <div>{{Nachricht}}</div>
            <div><span @click="toParentMethod">Klicken, um übergeordnetes Seitenereignis auszulösen</span></div>
        </div>
    </div>
</Vorlage>
 
<Skript>
Standard exportieren {
    Name:"Kinder",
    Requisiten:{
        Nachricht:{
            Typ: Zeichenfolge,
            Standard:''
        }
    },
    Methoden:{
        zuÜbergeordneteMethode(){
            dies.$emit('fromChildMethod')
        }
    }
}
</Skript>

Binden Sie die Methode fromChildMethod an die untergeordnete Komponente der übergeordneten Komponente, hören Sie auf die Methode und führen Sie, wenn die Methode ausgelöst wird, die entsprechende Methode fromChild in der übergeordneten Komponente aus.

<Vorlage>
    <div Klasse="übergeordnete Box">
        <div>
            <div>Ich bin die übergeordnete Seite</div>
            <div style="font-size:12px;">{{Nachricht}}</div>
            <div style="font-size:12px;color:red">{{fromChildMsg}}</div>
        </div>
        <Kinder :message="toChildrenMsg" @fromChildMethod="fromChild"></Kinder>
    </div>
</Vorlage>
 
<Skript>
Kinder aus './Children.vue' importieren
Standard exportieren {
    Name: „Übergeordnetes Element“,
    Komponenten: {
        Kinder
    },
    Daten(){
        zurückkehren {
            Nachricht: „Ich bin der Inhalt der übergeordneten Seite“,
            toChildrenMsg: 'Inhalt wird von der übergeordneten Seite an die untergeordnete Seite weitergegeben',
            vonChildMsg:''
        }
    },
    Methoden:{
        vonKind(){
            this.fromChildMsg = 'Von der untergeordneten Seite ausgelöste Methode' //Auf die von der untergeordneten Komponente ausgelöste Methode hören und den Inhalt anzeigen}
    }
}
</Skript>

Wenn auf den entsprechenden Bereich der untergeordneten Komponente geklickt wird, wird die Methode ausgelöst und die übergeordnete Komponente benachrichtigt.

Zusammenfassung: Vom übergeordneten Element zum untergeordneten Element: Requisiten; vom untergeordneten Element zum übergeordneten Element: this.$emit(); die Namen von Trigger und Listener müssen konsistent sein.

2. Bus-Event-Bus

In realen Szenarien haben Komponenten nicht nur „Eltern-Kind“-Beziehungen, sondern auch „Bruder“-Beziehungen und ebenenübergreifende Komponenten usw. Zu diesem Zeitpunkt sind Requisiten und $emit möglicherweise nicht anwendbar. Zu diesem Zeitpunkt scheint es, dass Bus (Ereignisbus) auch auf übergeordnete und untergeordnete Komponenten anwendbar ist.

Der Bus löst $emit aus, überwacht $on und schließt $off, hauptsächlich unter Verwendung von $emit und $on.

Erstellen Sie zunächst einen neuen Ordnerbus im Projekt, der eine Datei index.js enthält, erstellen Sie eine neue Vue-Instanz und exportieren Sie dann das Modul.

Als nächstes importieren Sie diese neue Vue-Instanz, also den Bus. Es gibt zwei gängige Importmethoden, eine ist der globale Import und die andere der lokale Import (jede Komponente muss einmal importiert werden). Das Folgende ist ein globaler Import. In main.js wird der Bus als Prototypmethode der aktuellen Vue-Instanz verwendet, die in jeder Komponente direkt über this.bus aufgerufen werden kann.

Vue von „vue“ importieren
App aus „./App“ importieren
Bus aus „./bus/index“ importieren
Vue.prototype.bus = Bus
 
neuer Vue({
  el: '#app',
  Komponenten: { App },
  Vorlage: '<App/>'
})

Im Folgenden wird der Prozess der Implementierung der Buskommunikation gezeigt. Das Szenario ist Vater-Sohn. Ebenso ist die Verwendung von Brüdern und plattformübergreifend ähnlich:

Die übergeordnete Komponente kommuniziert mit der untergeordneten Komponente, ausgelöst durch this.bus.$emit()

<Vorlage>
    <div Klasse="übergeordnete Box">
        <div>
            <div>Ich bin die übergeordnete Seite</div>
            <div @click="toChildBus"><span>Mit untergeordneten Komponenten kommunizieren</span></div>
        </div>
        <Kinder></Kinder>
    </div>
</Vorlage>
 
<Skript>
Kinder aus './Children.vue' importieren
Standard exportieren {
    Name: „Übergeordnetes Element“,
    Komponenten: {
        Kinder
    },
    Methoden:{
        zumKinderBus(){
            let val = 'Übergeordnete Komponente kommuniziert mit untergeordneter Komponente'
            this.bus.$emit('toChild',val) //val ist der übergebene Wert, nicht erforderlich}
    }
}
</Skript>

Die untergeordnete Komponente hört auf die Ereignisse, die von der übergeordneten Komponente ausgelöst werden (Binden und Hören in der bereitgestellten Phase). Beachten Sie, dass die Ereignisnamen konsistent sein müssen. Hören Sie über this.bus.$on(). Wenn der Bus auf die Triggermethode hört, holen Sie den übergebenen Wert ab (Sie können darin auch benutzerdefinierte Methoden ausführen).

<Vorlage>
    <div Klasse="Kinder-Box">
        <div>
            <div>Ich bin eine Unterseite</div>
            <div style="font-size:12px;color:blue;">{{fromParentMsg}}</div>
        </div>
    </div>
</Vorlage>
 
<Skript>
Standard exportieren {
    Name:"Kinder",
    Daten(){
        zurückkehren {
            vonParentMsg:''
        }
    },
    montiert(){
        dieser.bus.$off('toChild')
        dies.bus.$on('toChild',val=>{   
            this.fromParentMsg = val //Dies ist ein Kopiervorgang und die entsprechende Methode kann auch darin ausgeführt werden})
    }
}
</Skript>

Effektbild:

Zusammenfassung: Die Kommunikation zwischen Vater und Sohn, Brüdern und zwischen den Ebenen (Großeltern, Enkel usw.) wird auf die gleiche Weise geschrieben, daher werde ich nicht nacheinander Beispiele geben. Sie werden alle von this.bus.$emit() ausgelöst, von this.bus.$on() abgehört und führen entsprechende Operationen aus. Denken Sie daran: Die Namen der Auslöser und Abhörer müssen identisch sein!

3. Vuex-Statusverwaltungsbibliothek

Vuex entspricht einem Lager. Sie können einige Dinge in das Lager legen und den Status beibehalten, wenn sie gespeichert sind. Sie können sie bei Bedarf ändern und herausnehmen. Es ist ein globaler Status. Dieses Mal sprechen wir nur über die Verwendung von Vuex zur Kommunikation, ohne auf die Prinzipien einzugehen.

Installieren Sie vuex

npm installiere vuex --save

Hier erstelle ich einen neuen Ordner namens „store“, der eine Datei „index.js“ enthält, erstelle eine Vuex.Store-Instanz und exportiere diese Instanz dann. In der Abbildung können Sie die allgemeine Struktur und die Elemente des Stores deutlich erkennen. Ich werde nicht ins Detail gehen. Es gibt unzählige Artikel über Vuex, und Sie können sich selbst darüber informieren. Hier spreche ich hauptsächlich über die allgemeine Verwendung.

Importieren Sie es global in mian.js und verwenden Sie es dann direkt.

Vue von „vue“ importieren
App aus „./App“ importieren
Router aus „./router“ importieren
Bus aus „./bus/index“ importieren
Store aus „./store/index“ importieren
 
Vue.config.productionTip = falsch
Vue.prototype.bus = Bus
neuer Vue({
  el: '#app',
  Router,
  speichern,
  Komponenten: { App },
  Vorlage: '<App/>'
})

Methode 1, this.$store.state.xxx, arbeitet direkt mit dem Status und speichert den Wert während der Mount-Phase einer Komponente im Speicher. Natürlich können Sie auch mit der gewünschten Methode arbeiten.

<Vorlage>
    <div Klasse="übergeordnete Box">
        <div>
            <div>Ich bin die übergeordnete Seite</div>
        </div>
        <Kinder></Kinder>
    </div>
</Vorlage>
 
<Skript>
Kinder aus './Children.vue' importieren
Standard exportieren {
    Name: „Übergeordnetes Element“,
    Komponenten: {
        Kinder
    },
    Daten(){
        zurückkehren {
            vonChildMsg:''
        }
    }
    montiert(){
        this.$store.state.msg = 'Übergeordnete Komponente gespeichert' //Speichere sie hier über Methode 1}
}
</Skript>

Andere Bauteile werden aus dem Shop übernommen und können selbstverständlich auch modifiziert werden.

<Vorlage>
    <div Klasse="Kinder-Box">
        <div>
            <div>Ich bin eine Unterseite</div>
            <div @click="fromStore"><span>Aus dem Laden holen</span></div>
            <div>{{fromStoreMsg}}</div>
        </div>
    </div>
</Vorlage>
 
<Skript>
Standard exportieren {
    Name:"Kinder",
    Daten(){
        zurückkehren {
            vonStoreMsg:''
        }
    },
    Methoden:{
        vomStore(){
            dies.fromStoreMsg = dies.$store.state.msg
        }
    }
}
</Skript>

Effektbild:

Methode 2: Abrufen über this.$store.getters.xxx und mapGetters.

// speichern/index.js
Getter: {
    getMsg:status=>{
    Statusnachricht zurückgeben
  }
},
 
 
//Holen Sie sich this.$store.getters.getMsg in der Komponente
 
//Sie können auch mapGetters verwenden. import { mapGetters } von 'vuex'
berechnet: {
 ...mapGetters(['getMsg'])
},

Die im Store gespeicherten Daten können mithilfe von Mutationen und Aktionen (die asynchron sein können) gespeichert werden. Ich werde hier nicht ins Detail gehen. Wenn Sie interessiert sind, können Sie es selbst studieren.

4. Router

Sie können Werte durch dynamisches Routing und Routing-Sprünge übergeben, z. B. this.$router.push({path:'xxx',query:{value:'xxx'}}), beim Springen Werte übergeben und die übergebenen Parameter über this.$route.params.value und this.$route.query.value abrufen. Diese Methode hat Einschränkungen. Sie kann nur Werte abrufen, wenn Komponenten zueinander springen. Sie können keine Werte abrufen, indem Sie die Seite direkt nach dem Sprung aktualisieren. Verwenden Sie sie je nach Situation.

5. Zwischenspeicher

SessionStorage, lokaler Speicher, Cookies

Neben Bus und Store ist Cache eine weitere gängige Methode zur Kommunikation mehrerer Komponenten. Wenn dasselbe Fenster nicht geschlossen ist, können andere Komponenten unter dem Fenster die im Cache gespeicherten Werte abrufen. Verwenden Sie sessionStorage.setItem(key, value) und localStorage.setItem(key, value), um die Werte zu speichern. Andere Komponenten können sie über sessionStorage.getItem(key) und localStorage.getItem(key) abrufen. Mehrere Seiten teilen sich zwischengespeicherte Daten, und die Daten werden beim Aktualisieren der Seite nicht zerstört. Der Cache kann über sessionStorage.removeItem(key) und localStorage.removeItem(key) gelöscht werden. Es gibt viele anwendbare Szenarien.

Zusammenfassung: Dieser Artikel stellt kurz mehrere häufig verwendete Methoden zur Kommunikation und Wertübertragung in Vue-Komponenten vor und berücksichtigt verschiedene Szenarien, in denen unterschiedliche Methoden verwendet werden können, um die Entwicklungseffizienz zu verbessern und das Auftreten von Fehlern zu verringern.

Damit ist dieser Artikel über verschiedene Möglichkeiten (in verschiedenen Szenarien) zur Implementierung der Kommunikation zwischen Komponenten in Vue abgeschlossen. Weitere relevante Inhalte zur Vue-Komponentenkommunikation finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!