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

问题描述：

我们都知道，父子组件之间传参用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并且传参的方法是否能行，暂时没想到，不知道有没有大佬告知一下。暂时就这样吧。