Résumé des méthodes de transfert de données vue

Cette fois, je vais vous apporter un résumé de la méthode de transfert de données vue. Quelles sont les précautions pour le transfert de données vue. Voici des cas pratiques, jetons un oeil.

Avant-propos

Récemment, j'ai rencontré de nombreuses questions sur l'eventBus de vue qui m'ont également été posées lorsque je décidais de la sélection technologique. . 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: 'sendToSon'
// methods
updateHandler (newVal) {
 this.info = newVal
}

2. Composant enfant

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

Le parent transmet la valeur à l'enfant - ->props L'enfant transmet la valeur au parent-->Le composant enfant lie le rappel événement défini dans le composant parent, et le composant enfant déclenche cet é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.

Limitations

Composants parent-enfant.

eventBus

demo

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 qu'il s'agit essentiellement d'un vue instance Agit comme médiateur 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

1. 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).

2. $on ne sera pas automatiquement dissocié 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.

3. 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

1. Le eventBus orthodoxe est uniquement utilisé pour lier et déclencher des événements, et s'en fiche à propos des données, ne recoupe 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.

2. Le récepteur de données n'utilise plus $on pour connaître les modifications des données, mais les reçoit passivement en calculant les caractéristiques de l'attribut .

Problèmes résolus

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

et changez le composant de réception des 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
  }
 }

Vous pouvez voir que les données qui modifient directement la valeur ne peuvent pas recevoir de réponse dynamique.

Pourquoi utiliser les événements

n'a en fait pas besoin d'être déclenché par $emit. Il est également possible d'utiliser bus.val = 1 pour attribuer des valeurs directement, alors pourquoi ne pas le faire ?

Version simplifiée de vuex

En 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 une action pour distribuer (répartir) des événements afin de notifier le magasin pour changer. Nous avons finalement réalisé cette 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 ?

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utiliser JS pour détecter la configuration de l'ordinateur (avec code)

Comment personnaliser l'ouverture et la fermeture d'une vérification eslint du projet vue

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!