Interprétation détaillée d'Eventbus en vue

Cet article présente principalement les pièges du déclenchement multiple d'Eventbus dans Vue. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

La demande initiale est la suivante : afin de réaliser le transfert de données entre deux composants de page, supposons que j'ai la page A et que je clique sur un bouton sur la page A. Après cela, le la page passera automatiquement à la page B. En même temps, j'espère transférer certains paramètres de la page A à la page B. (Je sais que pour les petits paramètres, vous pouvez transmettre des paramètres via des paramètres de route ou une requête, ou des données volumineuses peuvent être traitées avec vuex. Malheureusement, je n'ai pas encore réalisé de très gros projet, donc je n'ai pas encore utilisé vuex. Suivant Je vais en apprendre davantage.)

Ensuite, j'ai pensé : n'est-ce pas simplement un problème de transfert de données entre différents composants ? Ne suffirait-il pas d'utiliser directement l'événement bus pour transférer des données ? Alors, j’ai continué avec plaisir. Concernant l'utilisation d'eventbus dans Vue, je l'ai déjà mentionné dans un article sur le transfert de données dans Vue.

Laissez-moi d'abord vous montrer mon code initial :

Atteindre l'objectif :

Après avoir cliqué, l'événement d'émission de bus sera redirigé vers la page /moneyRecord.

L'étape suivante consiste à recevoir cet événement sur la page MoneyRecord, puis à accepter les paramètres.

// 这是页面A的内部触发bus事件的代码
 editList (index, date, item) {
// 点击进入编辑的页面，需要传递的参数比较多。
  console.log(index, date, item)
  bus.$emit('get', {
  item: item.type,
  date: date
  })
  this.$router.replace({path: '/moneyRecord'})
 }

// moneyRecord页面
created () {
 //这里我将icon的list给保存下来了
 bus.$on('get', this.myhandle)
 },
methods: {
 myhandle (val) {
  console.log(val, '这是从上个页面传递过来的参数')
 }
}

Juste au moment où j'étais extatique, j'ai senti que tant que je déclenchais l'événement get sur la page A, la page B accepterait les données comme une évidence. Cependant, le résultat n'a pas été satisfaisant, jetez un œil à l'animation ci-dessous.

Jugez principalement le nombre de déclencheurs d'événements en regardant le nombre de fois où la ligne de données ""Ceci sont les données transmises à partir de la page précédente" est sortie. ""

Je ne sais pas si vous l'avez remarqué, mais lorsque je suis entré pour la première fois dans la page de liste, j'ai cliqué sur n'importe quel élément de la liste et il n'y a eu aucune sortie sur la console. Mais lorsque je clique pour déclencher l'événement pour la deuxième fois, des données de test seront générées. Cliquez à nouveau et deux données seront sorties. . . Augmenté en séquence. (Le "Ceci sont les données transmises depuis la page précédente" sur la console sont les données de test)

Donc, il y a deux questions.

Question :

1. Question 1 : Pourquoi l'événement on de la page B ne se déclenche-t-il pas lorsqu'il est déclenché pour la première fois <🎜 ? >

2. Question 2 : Pourquoi apparaît-il lorsque je le déclenche à nouveau en séquence ? À chaque fois, je constate que la distribution d'événements précédente n'a pas été révoquée, ce qui entraîne l'exécution de plus en plus de déclencheurs d'événements ? à chaque fois.

Solution

Pour le problème 1

Cela doit commencer par le cycle de vie de vue, je vais le faire en premier Les tests consistent à passer du composant de page A au composant de page B. Quels sont les cycles de vie des deux composants ? Je n'entrerai pas dans les détails de ce que fait le cycle de vie de Vue dans chaque période, je publierai ci-dessous. vue du cycle de vie.

J'ai fait mes propres expériences pour vérifier l'exécution des cycles de vie de ces deux composants lors du processus de saut de page.

// 我分别在页面A和页面B中去添加以下代码：
beforeCreate () {
 console.group('%c%s', 'color:red', 'beforeCreate 创建前状态===============组件2》')
 },
 created () {
 console.group('%c%s', 'color:red', 'created 创建完毕状态===============组件2》')
 },
 beforeMount () {
 console.group('%c%s', 'color:red', 'beforeMount 挂载前状态===============组件2》')
 },
 mounted () {
 console.group('%c%s', 'color:red', 'mounted 挂载状态===============组件2》')
 },
 beforeUpdate () {
 console.group('%c%s', 'color:red', 'beforeUpdate 更新前状态===============组件2》')
 },
 updated () {
 console.group('%c%s', 'color:red', 'updated 更新状态===============组件2》')
 },
 beforeDestroy () {
 console.group('%c%s', 'color:red', 'beforeDestroy 破前状态===============组件2》')
 },
 destroyed () {
 console.group('%c%s', 'color:red', 'destroyed 破坏状态===============组件2》')
 }
// 另外一个组件的我就不放出来了

Photo du résultat du test :

En fait, nous pouvons clairement voir à travers les résultats que lorsque nous are still Lorsque la page A est créée, la page B n'a pas encore été générée, c'est-à-dire que l'événement de A surveillé par créé dans la page B n'a pas encore été déclenché. À ce moment-là, lorsque vous émettez l’événement dans A, B ne le surveille pas.

Regardez encore, le rouge est le composant de la page B. Que se passe-t-il lorsque vous passez de la page A à la page B ? Tout d'abord, le composant B est créé en premier, puis beforeMount, puis le composant A est détruit, puis le composant A s'exécute avant Destory et est détruit.

Ainsi, nous pouvons écrire l'événement d'émission dans le composant de page A dans beforeDestory . Parce qu'à ce moment, le composant de la page B a été créé, c'est-à-dire que l'événement $on que nous avons écrit a été déclenché

, il est donc OK d'utiliser l'événement $emit pendant beforeDestory.

// 修改一下A页面中的代码：
// 这是原先的代码
 editList (index, date, item) {
// 点击进入编辑的页面，需要传递的参数比较多。
  console.log(index, date, item)
  this.item = item.type
  this.date = date
  this.$router.replace({path: '/moneyRecord'})
 }
// 重新在data属性内部定义新的变量，来存储要传过去的数据；
然后：
 beforeDestroy () {
 console.log(this.highlight, '这是今年的数据', this, '看看组件销毁之前会发生什么')
 bus.$emit('get', {
  item: this.item,
  date: this.date
  })
 },

Suivant. Jetez un oeil à l'effet après la modification

Vous pouvez voir que lorsque l'on clique sur la liste pour la première fois, c'est-à-dire lorsque l'événement d'émission est déclenché pour la première fois À ce moment-là, le contrôle est généré, donc le fait d'aller à $emit beforeDestoryed joue un rôle, et le composant de la page B surveille également l'arrivée de $on.

Cependant, il semble que même le déclenchement d'événements augmentera toujours en séquence, c'est-à-dire que la sortie de la console augmentera à chaque fois. . .

Solution :

Regardez ce qui a été proposé sur github. https://github.com/vuejs/vue/issues/3399

Vous Dada avez proposé la solution suivante :

*就是说，这个$on事件是不会自动清楚销毁的，需要我们手动来销毁。（不过我不太清楚这里的external bus 是什么意思，有大神能解答一下的吗，尤大大也提到如果是注册的是external bus 的时候需要清除）****

所以。我在B组件页面中添加Bus.$off来关闭。代码如下：

// 在B组件页面中添加以下语句，在组件beforeDestory的时候销毁。
 beforeDestroy () {
 bus.$off('get', this.myhandle)
 },

来看一下输出的结果

t可以看到，控制台第一次进去的时候就有输出，而且输出的不会逐次增加

*当然，尤大大还说可以写一个mixin？我还不知道是什么？以后在研究一下。

总结： 所以，如果想要用bus 来进行页面组件之间的数据传递，需要注意亮点，组件A$emit事件应在beforeDestory生命周期内。其次，组件B内的$on记得要销毁。

提问时间：你们在实现页面组件之间的数据传递有什么好的方法吗？可以留言分享一下吗？有时候虽然也可以通过从后台获取，但是考虑到数据只有几个需要传的话，就没有必要去请求数据，我知道有的还有用vueX传递。还有呢？

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用EasyUI如何绑定Json数据源

在vue-cli中如何实现组件通信

Vue项目优化需要注意哪些？

在vuejs中使用模块化的方式开发

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!