Cleverer Einsatz der Vue-Datenübertragung

Dieses Mal werde ich Ihnen die geschickte Nutzung der Vue-Datenübertragung vorstellen. Was sind die Vorsichtsmaßnahmen für die geschickte Nutzung der Vue-Datenübertragung? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Vorwort

In letzter Zeit wurden mir auch viele Fragen zum EventBus von vue gestellt, als ich mich für die Technologieauswahl entschied . Der Nutzungsumfang von vuex und eventBus. 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: 'sendToSon'
// methods
updateHandler (newVal) {
 this.info = newVal
}

2. Untergeordnete Komponente

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

Übergeordnete Komponente übergibt Wert an untergeordnete Elemente -->props Das untergeordnete Element übergibt den Wert an das übergeordnete Element -> Der Rückruf des Bindungsereignisses der untergeordneten Komponente ist in der übergeordneten Komponente definiert und die untergeordnete Komponente 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 importierte Businstanzen

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

Es ist ersichtlich, dass es sich im Wesentlichen um eine Vue-Instanz handelt fungiert als ereignisbindendes Medium. 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 wird nur zum Binden und Auslösen von Ereignissen verwendet und kümmert sich nicht um Daten . Überschneidung mit 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? Nutzen Sie berechnete Eigenschaften, um den auf dem Bus gespeicherten Wert direkt auszulesen, 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 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
  }
 }

. Sie sehen, dass auf die Daten, die den Wert direkt ändern, nicht dynamisch reagiert werden kann.

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 glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Vue.js+Flask zum Erstellen einer mobilen App

Wie man Vue zum Implementieren von Bildern verwendet Karussell

Das obige ist der detaillierte Inhalt vonCleverer Einsatz der Vue-Datenübertragung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!