Zusammenfassung der Vue-Datenübertragungsmethoden

Dieses Mal werde ich Ihnen eine Zusammenfassung der Vue-Datenübertragungsmethode geben. Was sind die Vorsichtsmaßnahmen für die Vue-Datenübertragung?

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 Die untergeordnete Komponente übergibt den Wert an die übergeordnete Komponente -> Die untergeordnete Komponente bindet den in der übergeordneten Komponente definierten -Ereignis--Rückruf, 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: Wenn Routing umgeschaltet wird, 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 löst die Bindung nicht automatisch, nachdem die Komponente zerstört wurde. Wenn dieselbe Komponente mehrmals generiert wird, wird das Ereignis mehrmals gebunden und $emit wird einmal ausgelöst 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, indem er die Eigenschaften des -Attributs berechnet.

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 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 können sehen, dass auf die Daten, die den Wert direkt ändern, in den Daten nicht dynamisch reagiert werden kann.

Warum Ereignisse nutzen

muss eigentlich nicht durch $emit ausgelöst werden. Es ist auch möglich, bus.val = 1 zu verwenden, um Werte direkt zuzuweisen. Warum also nicht?

Vereinfachte Version von vuex

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

Komponenten dürfen den zur Store-Instanz gehörenden Status nicht direkt ändern, sollten aber eine Aktion ausführen, um Ereignisse zu verteilen (zu versenden), um den Store zu benachrichtigen Wir haben endlich diese Flux-Architektur erreicht. 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:

JS zur Erkennung der Computerkonfiguration verwenden (mit Code)

So passen Sie das Öffnen und Schließen an einer Vue-Projekt-Eslint-Verifizierung

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