Dieser Artikel stellt Ihnen hauptsächlich vier Methoden der Vue-Komponentenkommunikation vor, nämlich die Kommunikation zwischen Eltern und Kindern, die EventBus-Kommunikation, die Verwendung von localStorage oder sessionStorage und die Verwendung von Vuex Lernen Sie unten gemeinsam.
Vorwort
Wie wir alle wissen, ist Vue ein MVVM-Framework, und einer der größten Unterschiede zu JQuery besteht darin, dass zwischen den Komponenten von Kommunikation. Der Schwerpunkt dieses Artikels liegt auf der Klärung der ersten beiden, Eltern-Kind-Komponentenkommunikation und EventBus-Kommunikation. Ich denke, die Anweisungen im Vue-Dokument sind noch etwas einfach und ich habe sie beim ersten Mal nicht verstanden.
Kommunikation zwischen übergeordneten und untergeordneten Komponenten
EventBus-Kommunikation zwischen nicht übergeordneten und untergeordneten Komponenten
Verwenden der lokalen Cache-Komponentenkommunikation
Vuex-Kommunikation
Die erste Kommunikationsmethode: Eltern-Kind-Komponentenkommunikation
Die übergeordnete Komponente übergibt Daten an die untergeordnete Komponente
Die übergeordnete Komponente muss insgesamt 4 Dinge tun
1. import son from './son.js'
Führen Sie den Sohn der untergeordneten Komponente ein
2. Registrieren Sie alle Unterkomponentennamen in components : {"son"}
3. Wenden Sie die Unterkomponente in der Vorlage der übergeordneten Komponente an, <son></son>
4. Wenn Sie Daten an die Unterkomponente übergeben müssen, schreiben Sie einfach <son :num="number"></son>
// 1.引入子组件 import counter from './counter' import son from './son'
// 2.在ccmponents里注册子组件 components : { counter, son },
// 3.在template里使用子组件 <son></son>
// 4.如果需要传递数据,也是在templete里写 <counter :num="number"></counter>
Die Unterkomponente muss nur eine Sache tun
1. Verwenden Sie Requisiten, um Daten zu akzeptieren, und Sie können die Daten direkt verwenden
2. Die von der Unterkomponente empfangenen Daten können nicht geändert werden. Wenn Sie es wirklich ändern müssen, können Sie berechnete Eigenschaften verwenden oder die Daten einer Variablen in den Daten der untergeordneten Komponente zuweisen
// 1.用Props接受数据 props: [ 'num' ],
Die untergeordnete Komponente übergibt Daten an die übergeordnete Komponente
Übergeordnete Komponente: Die Komponente muss insgesamt zwei Dinge tun
Ereignis in der Vorlage definieren
Eine Funktion in Methoden schreiben, um auf die Ereignisauslösung der Unterkomponente zu warten
// 2.如果需要修改得到的数据,可以这样写 props: [ 'num' ], data () { return { number : this.num } },
// 1. 在templete里应用子组件时,定义事件changeNumber <counter :num="number" @changeNumber="changeNumber" > </counter>
Die Unterkomponente benötigt insgesamt 1 Sache
Nachdem sich die Daten geändert haben, verwenden Sie $emit, um sie auszulösen
// 2. 用changeNumber监听事件是否触发 methods: { changeNumber(e){ console.log('子组件emit了',e); this.number = e }, }
Zweite Kommunikationsmethode: eventBus
eventBus Diese Kommunikationsmethode zielt auf die Kommunikation zwischen nicht-übergeordneten und untergeordneten Komponenten ab. Ihr Prinzip besteht immer noch in der Ereignisauslösung und -überwachung.
Da es sich jedoch um keine Eltern-Kind-Komponenten handelt, benötigen sie eine Zwischenkomponente, um sie zu verbinden.
Ich verwende es, indem ich eine Komponente definiere, auf die alle Komponenten in der Stammkomponente zugreifen können, nämlich die #app-Komponente. Die spezifische Verwendung ist wie folgt:
Verwenden Sie eventBus, um Daten zu übertragen. Insgesamt müssen drei Dinge erledigt werden
1. Fügen Sie der App-Komponente das Bus-Attribut hinzu (damit alle Komponenten über this.$root.Bus
darauf zugreifen können und keine Dateien eingeführt werden müssen)
2. In der Komponente In 1 löst this.$root.Bus.$emit
das Ereignis aus
3. In Komponente 2 überwacht this.$root.Bus.$on
das Ereignis
// 1. 子组件在数据变化后,用$emit触发即可,第二个参数可以传递参数 methods: { increment(){ this.number++ this.$emit('changeNumber', this.number) }, }
// 1.在main.js里给app组件,添加bus属性 import Vue from 'vue' new Vue({ el: '#app', components: { App }, template: '<App/>', data(){ return { Bus : new Vue() } } })
// 2.在组件1里,触发emit increment(){ this.number++ this.$root.Bus.$emit('eventName', this.number) },
Die dritte Kommunikationsmethode: Verwendung von localStorage oder sessionStorage
Diese Art der Kommunikation ist relativ einfach. Der Nachteil besteht darin, dass die Daten und der Status chaotisch und nicht einfach zu verwalten sind.
Daten abrufen über window.localStorage.getItem(key)
Daten speichern über window.localStorage.setItem(key,value)
Hinweis: Verwenden Sie dazu JSON.parse() / JSON.stringify()
Datenformatkonvertierung.
Die vierte Kommunikationsmethode: Verwendung von Vuex
Vuex ist komplizierter, Sie können einen separaten Artikel schreiben
Das Obige Ich habe es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
Verwendung von SpringMVC zur Lösung domänenübergreifender Vue-Anfragen
Neue Funktionen von Webpack 4.0.0-beta.0 Version (Details Tutorial)
So implementieren Sie Wertübergabe und Kommunikation in vue2.0-Komponenten
Das obige ist der detaillierte Inhalt vonVue-Komponentenkommunikation (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!