Transfert de données Vue – J'ai des compétences particulières en matière de mise en œuvre

Cet article présente principalement quelques techniques de tri spéciales pour la transmission des données Vue. Les amis qui en ont besoin peuvent s'y référer

Avant-propos

Récemment. Rencontré Il y a d'autres questions sur eventBus de vue. Lors du choix de la technologie, on m'a également posé des questions sur la portée d'utilisation de vuex et eventBus. Alors écrivez-le simplement. Dans le même temps, il existe une solution de mise en œuvre spéciale.

Il existe plusieurs méthodes de transfert de données, vuex, props, eventBus et eventBus spécial.

vuex

Si vous ne l'introduisez pas, vous baisserez les yeux si le volume et la complexité des données ne sont pas à la hauteur.

accessoires

démo

Les composants parents et enfants transmettent les valeurs, API officielle, il suffit d'écrire une démo.

1. Composant parent

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

2.

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

Le parent transmet la valeur à l'enfant-->props l'enfant transmet la valeur au parent-->Le rappel de l'événement de liaison du sous-composant est défini dans le composant parent, le sous-composant déclenche ceci événement. Comme il n'est pas recommandé de modifier directement les accessoires passés dans le composant parent dans le composant enfant, vous devez utiliser des événements personnalisés.

LimitationsComposants parent-enfant.

eventBus

démo

les bus sont tous des instances de bus importées

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

On peut voir que l'essence est qu'une instance de vue agit comme un support pour la liaison d'événements. Utilisez-le dans tous les cas pour la communication de données.

Deux (plusieurs) parties utilisent des événements portant le même nom pour communiquer.

Problème

Quand $emit, il doit être $on, sinon l'événement ne sera pas surveillé, ça c'est-à-dire qu'il existe certaines exigences simultanées pour les composants. (Remarque : lorsque le routage est commuté, le nouveau composant de routage est créé en premier, puis l'ancien composant de routage est détruit. Dans certains cas, ces deux cycles de vie peuvent être écrits séparément, voir cette question).
$on ne sera pas automatiquement délié après la destruction du composant. Si le même composant est généré plusieurs fois, l'événement sera lié plusieurs fois et $emit sera déclenché une fois, et plusieurs réponses seront nécessaires.
Les données ne sont pas des données « durables » et ne peuvent pas être enregistrées. Elles ne prendront effet qu'après $emit.
Alors existe-t-il une solution plus adaptée ?

Événement spécialBus ?

démo

Jetons d'abord un coup d'œil au code, le code en ligne. les bus sont tous des instances de bus importées.

// 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
 }
}

Différent

L'EventBus orthodoxe est il est simplement utilisé pour lier et déclencher des événements. Il ne se soucie pas des données et ne croise pas les données. Cette solution ajoute une étape supplémentaire pour ajouter des données directement à l'instance de bus. Et la surveillance des événements et l’ajout de données doivent être définis à l’avance.
Le récepteur de données n'utilise plus $on pour connaître les modifications des données, mais les reçoit passivement à travers les caractéristiques des attributs calculés.

Problèmes résolusLes composants de communication doivent-ils exister en même temps ? Les données sont stockées sur le bus, il n’y a donc aucune exigence.

Lier plusieurs fois ? Les moniteurs de liaison sont tous sur le bus et ne seront pas liés à plusieurs reprises.

Les données ne sont disponibles qu'après $emit ? Utilisez les propriétés calculées pour lire directement la valeur stockée sur le bus sans déclencher à nouveau l'événement.

Discutez Pourquoi les propriétés calculées sont utilisées

En fait, cela devrait être la raison pour laquelle elles ne peuvent pas être ajoutées directement aux données , tel que data1 : bus .data1 ? Nous pouvons examiner un autre morceau de code, le code en ligne. Modifiez le bus en

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

Changez le composant de réception de données en

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

Comme vous pouvez le constater, les données qui modifient directement la valeur obtenue à partir des données ne peuvent pas répondre dynamiquement.

Pourquoi utiliser eventEn fait, il n'est pas nécessaire de déclencher

Il est également possible d'utiliser

pour. attribuer des valeurs directement, alors pourquoi ne pas faire ça Drap de laine ? $emitbus.val = 1

Version simplifiée de vuexEn fait, cet eventBus est une version simplifiée de vuex. Il y a ce passage dans la documentation de vue :

Les composants ne sont pas autorisés à modifier directement l'état appartenant à l'instance du magasin, mais doivent exécuter des actions pour distribuer (envoyer) des événements afin d'avertir le magasin de changer. l'architecture Flux. L'avantage de cet accord est que nous pouvons enregistrer tous les changements d'état qui surviennent dans le magasin.

store correspond à l'instance de bus, state correspond aux données, action correspond à l'événement et dispatch correspond à $emit. Dans le même temps, la façon dont les composants de vuex obtiennent des données se fait via des propriétés calculées, donc en fait, il n'est pas si difficile de comprendre et d'utiliser l'architecture vuex et Flux, n'est-ce pas ?

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Implémentation du téléchargement de fichiers avec barre de progression basée sur la technologie Ajax

Discussion sur readyState et le statut en Ajax Question

Analyse complète des paramètres de la méthode $.Ajax() (tutoriel graphique)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!