微信关注
在线联系

vue中eventbus被多次触发以及踩过的坑

一开始的需求是这姿态的,我为了完成两个页面组件之间的数据传递,假定我有页面a,点击页面a上的某一个按钮之后,页面会主动跳转到页面b,一起我期望将页面a上的某一些参数带着曩昔给页面b。

然后我就想,这不便是不同组件之间的数据传递问题罢了吗?直接用bus 巴士工作来传递数据不就行了吗。所以,我就很愉快地进行了。关于vue中的eventbus的运用,我之前在一篇vue中的数据传递中有提到过。

先给你们看一下我一开始的代码:




// 这是页面a的内部触发bus工作的代码
 editlist  {
// 点击进入修正的页面,需求传递的参数比较多。
 console.log
 bus.$emit
// moneyrecord页面
created  {
 //这儿我将icon的list给保存下来了
 bus.$on
methods: {
 myhandle  {
 console.log

就当我欣喜若狂的时分,觉得自己只要在页面a触发了get工作,页面b中就会天经地义的接受了数据。可是,成果却不如人意,看一下下面的动图。

主要是看“”这是从上个页面传来的数据这一行数据的输出次数状况来判别工作触发次数。“”


不知道你有没有发现,便是我第一次进去list页面的时分,我随意点击一下list下的任何一个item,控制台没有输出。可是当我第2次再点击触发工作的时分,就会输出一个测验数据。再一次进去点击,就输出两个数据。。。顺次添加了。

所以,有两个问题。

问题:

处理


这个还得从vue的生命周期说起了,我先进行了测验,便是当从页面组件a跳转到页面组件b的时分,两个组件的生命周期分别是怎么样的,关于vue的生命周期详细每一个时期做什么工作我就不再赘述了,下面po一张vue生命周期的图。


我自己做了试验来验证,这个页面跳转过程中,这两个组件的生命周期的履行状况。

// 我分别在页面a和页面b中去添加以下代码:
beforecreate  {
 console.group
 created  {
 console.group
 beforemount  {
 console.group
 mounted  {
 console.group
 beforeupdate  {
 console.group
 updated  {
 console.group
 beforedestroy  {
 console.group
 destroyed  {
 console.group
// 别的一个组件的我就不放出来了

测验成果图:



其实,能够经过成果清楚看到,当咱们还在页面a的时分,页面b还没生成,也便是页面b中的 created中所监听的来自于a中的工作还没有被触发。这个时分当你a中emit工作的时分,b其实是没有监听到的。

再看一下,赤色的是b页面组件,当你从页面a到页面b跳转的时分,发生了什么?首先是先b组件先created然后beforemount接着a组件才被毁掉,a组件才履行beforedestory,以及destoryed.

所以,咱们能够把a页面组件中的emit工作写在beforedestory中去。由于这个时分,b页面组件现已被created了,也便是咱们写的$on工作现已触发了

所以能够,在beforedestory的时分,$emit工作。

// 修正一下a页面中的代码:
// 这是原先的代码
 editlist  {
// 点击进入修正的页面,需求传递的参数比较多。
 console.log
 this.item = item.type
 this.date = date
 this.$router.replace
// 从头在data特点内部界说新的变量,来存储要传曩昔的数据;
 beforedestroy  {
 console.log
 bus.$emit {
 bus.$off
 },

来看一下输出的成果


t能够看到,控制台第一次进去的时分就有输出,并且输出的不会逐次添加

*当然,尤大大还说能够写一个mixin?我还不知道是什么?今后在研究一下。

总结: 所以,假如想要用bus 来进行页面组件之间的数据传递,需求留意亮点,组件a$emit工作应在beforedestory生命周期内。其次,组件b内的$on记得要毁掉。

发问时刻:你们在完成页面组件之间的数据传递有什么好的办法吗?能够留言共享一下吗?有时分尽管也能够经过从后台获取,可是考虑到数据只要几个需求传的话,就没有必要去恳求数据,我知道有的还有用vuex传递。还有呢?

以上便是本文的全部内容,期望对我们的学习有所协助,也期望我们多多支撑萬仟网。


HOME |  ABOUT US |  PORTFOLIO |  NEWS |  CONTACT US

Copyright © 2018 918博天堂网址918博天堂网址-918博天堂官网 All Rights Reserved Power by DedeCms


CONTACT US
+86 02888888888