子组件多次复用且传参到父组件时遇到的一些问题。

问题描述:

我们都知道,父子组件之间传参用props,子向父用$emit,兄弟间有bus。但是今天遇到个问题,A组件是一个selector选择器小组件,根据传参不同选择项目也不同,返回结果也不同。B组件中使用了4次A组件,传参都不一样,且需要将4次的返回结果都保存下来。
其实就是下图4个自己封装的选择器,分别是A组件的4次复用,整个的大组件是B,B组件需要根据A组件的值来进行搜索,获取统计等操作。手机号那里是个input,很好获取。
在这里插入图片描述

A组件选择好值之后,将值保存在A组件的selectedData变量中。那么B组件怎么获取到A组件中的值呢?

B组件获取A组件中的值:

思路为:
1.用Bus,当A组件完成选择事件handleConfirm时,立即使用$emit方法,向B组件发送自定义方法selected,通知B组件已经完成选择。B组件在mounted钩子函数中,为bus绑定$on事件,使用自定义方法selected,调用B组件中的处理函数selectorChang,selectorChang处理函数的作用是改变B组件中定义的一个变量selectorChangeFlag的布尔值,让其取反。然后在watch监听器中,监听selectorChangeFlag的变化,这样不论哪个A组件的值发生选择变化,B组件都知道,且当selectorChangeFlag发生变化时,将4个A组件的值通过$refs来获取到。

2.上面的思路饶了一个大圈子,既然在$on中就监听到了变化,为什么不直接在此时将4个A组件的值通过$refs来获取到。经测有效。开始想的时候还是想偏了。。。哭
简化后流程为:

用Bus,当A组件完成选择事件handleConfirm时,立即使用$emit方法,向B组件发送自定义方法selected,通知B组件已经完成选择。B组件在mounted钩子函数中,为bus绑定$on事件,使用自定义方法selected,在$on后面的回调函数中直接将4个A组件的值通过$refs来获取到。或者通过给A组件绑定自定义属性:data-value="selectedData"来获取。

在这里插入图片描述
在这里插入图片描述

3.后来又想到,既然都已经用到bus了,为什么不直接在bus的$emit的时候将参数发过去呢?那样就不用$refs或者data-*绑自定义属性来获取值了。
需要解决的一个问题就是B组件中要获得4个值,而bus一次只传递了1个值,如果需要分别用$on绑定4次自定义事件selected,触发的函数分别是getYear,getMonth,getType,getChannel,那样会出问题。因为每次完成选择之后,year,month,type,channel的值都把之前的值覆盖了!!
在这里插入图片描述
使用devtools查看vue中的值,确实是每次都覆盖了。
在这里插入图片描述
所以我想要解决这个问题,只有在A组件中定义4个自定义方法,每个方法对应B组件中的一个方法,来获取1个参数。
试试修改之后,发现还是不行!依然覆盖前面的值。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这里我分析原因:
对于前面一种情况——每次A组件触发emit事件,只能由这一个Bus来传递1个值,而B组件不知道A组件传递来的是year还是month或者其他,B只能被动的接收A组件传递过来的值!当B调用4个get函数来为year,month赋值时,会将4个属性都赋值了一遍!肯定覆盖了前面的值!
对于后面一种情况——定义了4个自定义事件,相当于车上有4个座位!但是由于传递过来的仍然只有1个值,所以座位上的4个人都是同一个人!B组件接受A传来的值时,依然将4个座位上的人分别赋值给4个属性,但是这4个人根本就是同一个人!!所以依然覆盖了前面的值!

想了很久,还是没想出来如何只使用 Bus传值 来获取4个属性,越想越乱,这个方法暂停一下吧。

4.这里A,B其实是属于父子组件关系,可以通过$emit直接传值,而不需要使用bus。试了试发现,这样实现也比较简单。
A子组件直接触发自定义事件并传递参数。

在这里插入图片描述
B组件直接在A组件上分别绑定自定义事件和处理函数!
在这里插入图片描述
检查devtools,发现A组件值改变并不影响B组件中已经获得的值!
在这里插入图片描述

分析原因:
我觉得这里生成了4个A组件,然后在4个A组件上分别绑定各自的处理函数!每次A组件触发$emit事件,B组件中的自定义事件selected调用对应的处理函数获取这1个值,并不影响其他剩余3个A组件的自定义事件selected!这里很关键,它并不会影响其他3个A组件的selected事件。
这就相当于4台车,一台车一次只拉1个人,拉回来之后只触发1个处理函数,并且通过处理函数来赋值。其他的车一样处理,每台车之间互不影响!
而互不影响的原因是,4个A组件之间虽然有同样的自定义函数名selected,但是因为分别属于4个实例,year这个A组件中的selected不会触发绑定在month这个A组件上的处理函数getMonth!作用域不同!
这样就不会覆盖其他的3个值!

目前我的的最佳解决方式就是:

二、使用bus或者$emit触发子组件的处理事件,然后通知B组件通过$ref或者自定义属性获取值。
1.A子组件中bus.$emit发送自定义方法,告知B组件。
2.B父组件中bus.$on监听到后,直接在回调函数中,通过$refs获取所有A组件中的属性(对于没有发送选择的获取到的值为空,有空值处理)。

四、直接使用子传父$emit并且传值。
1.A子组件中this.$emit发送自定义方法selected,告知B组件,并将值传递过去。
2.B组件在复用的A组件上面绑定自定义方法,并且调用对应的处理函数来赋值。

关于如何只使用bus并且传参的方法是否能行,暂时没想到,不知道有没有大佬告知一下。暂时就这样吧。

猜你喜欢

转载自blog.csdn.net/SilenceJude/article/details/86192067