Vue-Datenübertragung – Ich verfüge über besondere Implementierungsfähigkeiten

In diesem Artikel werden hauptsächlich einige spezielle Sortiertechniken für die Vue-Datenübertragung vorgestellt. Freunde, die sie benötigen, können darauf verweisen

Vorwort

Kürzlich Ich bin auf weitere Fragen zum EventBus von Vue gestoßen. Bei der Entscheidung über die Technologieauswahl wurde ich auch nach dem Einsatzbereich von Vuex und EventBus gefragt. Also schreib es einfach auf. Gleichzeitig gibt es eine spezielle Umsetzungslösung.

Es gibt verschiedene Datenübertragungsmethoden: Vuex, Props, EventBus und Special EventBus.

vuex

Wer es nicht einführt, wird nach unten schauen, wenn das Datenvolumen und die Komplexität ihm nicht gewachsen sind.

Requisiten

Demo

Übergeordnete und untergeordnete Komponenten übergeben Werte, offizielle API, schreiben Sie einfach eine Demo.

1. Übergeordnete Komponente

<son :info="info" @update="updateHandler"/>
// data
info: &#39;sendToSon&#39;
// methods
updateHandler (newVal) {
 this.info = newVal
}

2. Untergeordnete Komponente

// props
props: ['info']
// 向上传值，某个方法中使用
this.$emit('update', 'got')

Parent übergibt Wert an untergeordnete Komponente-->props untergeordnetes Element übergibt Wert an übergeordnetes Element-->Der Rückruf des Bindungsereignisses der untergeordneten Komponente wird in der übergeordneten Komponente und der untergeordneten Komponente definiert löst dieses Ereignis aus. Da es nicht empfohlen wird, die in der übergeordneten Komponente übergebenen Requisiten direkt in der untergeordneten Komponente zu ändern, müssen Sie benutzerdefinierte Ereignisse verwenden.

Einschränkungen

Eltern-Kind-Komponenten.

eventBus

Demo

Bus sind alle importierten Businstanzen

// bus
const bus = new Vue()
// 数据接收组件
// 当前组件接收值则
bus.$on('event1', (val)=>{})
// 数据发出组件
// 当前组件发出值则
bus.$emit('event1', val)

Es ist ersichtlich, dass das Wesentliche eine Vue-Instanz ist, die als Medium für die Ereignisbindung fungiert. Verwenden Sie es in allen Fällen zur Datenkommunikation.

Zwei (mehrere) Parteien nutzen zur Kommunikation Ereignisse mit demselben Namen.

Problem

1. Wenn $emit, muss es $on sein, sonst wird das Ereignis nicht überwacht Das heißt, es gibt bestimmte gleichzeitige Anforderungen an Komponenten. (Hinweis: Beim Umschalten des Routings wird zuerst die neue Routing-Komponente erstellt und dann die alte Routing-Komponente zerstört. In einigen Fällen können diese beiden Lebenszyklen separat geschrieben werden, siehe diese Frage.)

2. $on wird nach der Zerstörung der Komponente nicht automatisch aufgehoben. Wenn dieselbe Komponente mehrmals generiert wird, wird das Ereignis mehrmals gebunden und $emit wird einmal ausgelöst. und es sind mehrere Antworten erforderlich.

3. Die Daten sind keine „langlebigen“ Daten und können nicht gespeichert werden. Sie werden erst nach $emit wirksam.

Gibt es also eine passendere Lösung?

SonderveranstaltungBus?

Demo

Werfen wir zunächst einen Blick auf den Code, den Online-Code. Busse sind alle importierte Businstanzen.

// bus
const bus = new Vue({
 data () {
  return {
   // 定义数据
   val1: ''
  }
 },
 created () {
  // 绑定监听
  this.$on('updateData1', (val)=>{
   this.val1 = val
  })
 }
})
// 数据发出组件
import bus from 'xx/bus'
// 触发在bus中已经绑定好的事件
bus.$emit('update1', '123')
// 数据接收组件

{{val1}}
// 使用computed接收数据
computed () {
 val1 () {
  // 依赖并返回bus中的val1
  return bus.val1
 }
}

Anders

1. Der orthodoxe EventBus ist nur für Bindungs- und auslösende Ereignisse kümmern sich nicht um die Daten und überschneiden sich nicht mit den Daten. Diese Lösung fügt einen weiteren Schritt hinzu, um Daten direkt zur Businstanz hinzuzufügen. Und Ereignisüberwachung und Datenergänzung müssen im Voraus definiert werden.

2. Der Datenempfänger nutzt nicht mehr $on, um sich über Datenänderungen zu informieren, sondern empfängt diese passiv über die Eigenschaften berechneter Attribute.

Probleme gelöst

Müssen Kommunikationskomponenten gleichzeitig vorhanden sein? Die Daten werden auf dem Bus gespeichert, daher gibt es keine Anforderungen.

Mehrmals binden? Die Bindungsmonitore befinden sich alle im Bus und werden nicht wiederholt gebunden.

Daten sind erst nach $emit verfügbar? Mithilfe berechneter Eigenschaften können Sie den auf dem Bus gespeicherten Wert direkt lesen, ohne das Ereignis erneut auszulösen.

Besprechen Sie

Warum berechnete Eigenschaften verwendet werden

Tatsächlich sollte es der Grund sein, warum sie nicht direkt zu Daten hinzugefügt werden können , wie zum Beispiel data1: bus .data1? Wir können uns einen anderen Teil des Codes ansehen, den Online-Code. Ändern Sie den Bus auf

data () {
 return {
  // 多一层结构
  val: {
   result: 0
  }
 }
},
created () {
 this.$on('update1', val => {
  console.log('触发1', i1++)
  this.val.result = val
 })
}

und ändern Sie die Datenempfangskomponente auf

// template
data中获取直接修改值：{{dataResult}}
data中获取直接修改值的父层：{{dataVal}}
computed中依赖直接修改值：{{computedResult}}
// js
data () {
  return {
   // 获取直接修改值
   dataResult: bus.val.result,
   // 获取直接修改值的父层
   dataVal: bus.val
  }
 },
 computed: {
  computedResult () {
   // 依赖直接修改值
   return bus.val.result
  }
 }

wie Sie sehen, dass Daten, die den aus Daten erhaltenen Wert direkt ändern, nicht dynamisch reagieren können.

Warum Ereignis verwenden?

Tatsächlich besteht keine Notwendigkeit, $emit auszulösen. Es ist auch möglich, bus.val = 1 zu verwenden Weisen Sie Werte direkt zu. Warum also nicht dieses Wolltuch?

Vereinfachte Version von vuex

Tatsächlich ist dieser EventBus eine vereinfachte Version von vuex. Es gibt diese Passage in der Vue-Dokumentation:

Komponenten dürfen den Status der Store-Instanz nicht direkt ändern, sondern sollten Aktionen ausführen, um Ereignisse zu verteilen (zu versenden), um den Store über Änderungen zu informieren. Wir haben es endlich erreicht die Flux-Architektur. Der Vorteil dieser Vereinbarung besteht darin, dass wir alle Zustandsänderungen, die im Geschäft auftreten, aufzeichnen können.

Store entspricht der Businstanz, Status entspricht Daten, Aktion entspricht Ereignis und Versand entspricht $emit. Gleichzeitig erfolgt die Datengewinnung durch Komponenten in Vuex über berechnete Eigenschaften. Es ist also eigentlich gar nicht so schwer, die Vuex- und Flux-Architektur zu verstehen und zu verwenden, oder?

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Implementieren des Datei-Uploads mit Fortschrittsbalken basierend auf Ajax-Technologie

Diskussion über readyState und Status in Ajax Frage

Umfassende Analyse der Parameter der $.Ajax()-Methode (grafisches Tutorial)

Das obige ist der detaillierte Inhalt vonVue-Datenübertragung – Ich verfüge über besondere Implementierungsfähigkeiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!