Vue-Komponentenkommunikation (ausführliches Tutorial)

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, 1207412ca14c1d8bb1c5d564f723d29198f9e0de16d4632c0e387ffd4bb1294d

4. Wenn Sie Daten an die Unterkomponente übergeben müssen, schreiben Sie einfach 74a0cf1cff41c5fa40ba779f12df3c3e98f9e0de16d4632c0e387ffd4bb1294d

 // 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'
  ],

rrree

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: &#39;<App/>&#39;,
 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!