Transfert de données Vue – J'ai des compétences particulières en matière de mise en œuvre-js tutoriel-php.cn

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

亚连

Libérer： 2018-05-25 16:23:28

original

1661 Les gens l'ont consulté

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
}

Copier après la connexion

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

Copier après la connexion

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(&#39;event1&#39;, (val)=>{})
// 数据发出组件
// 当前组件发出值则
bus.$emit(&#39;event1&#39;, val)

Copier après la connexion

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

É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: &#39;&#39;
  }
 },
 created () {
  // 绑定监听
  this.$on(&#39;updateData1&#39;, (val)=>{
   this.val1 = val
  })
 }
})
// 数据发出组件
import bus from &#39;xx/bus&#39;
// 触发在bus中已经绑定好的事件
bus.$emit(&#39;update1&#39;, &#39;123&#39;)
// 数据接收组件

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

Copier après la connexion

Différent

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(&#39;update1&#39;, val => {
  console.log(&#39;触发1&#39;, i1++)
  this.val.result = val
 })
}

Copier après la connexion

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

Copier après la connexion

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.