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

2023-11-14

问题描述:

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐

  • android 手势检测(左右滑动、上下滑动)

    开发十年 就只剩下这套Java开发体系了 gt gt gt GestureDetector类可以让我们快速的处理手势事件 如点击 滑动等 使用GestureDetector分三步 1 定义GestureDetector类 2 初始化手势类
  • 共轭方式怎么判断_怎么判断共轭效应是吸电子共轭效应还是给电子共轭效应?吸电子基和给电子基是根据什么判断的?...

    谢邀 我想按照我的思路给你解答解答 我要祭出我的高等有机化学笔记了 先说一句 要笔记的 在老家放着 没法卖给你们 而且说实话不好好看书的人 给你笔记你也不会 共轭效应只是众多电子效应中的一种 先从共轭效应开始讲起吧 共轭效应是由于共轭体系的
  • 滤波器相位补偿

    概要 滤波器使用的过程中都会产生相位的改变 有时 相位的改变并不是我们想要的 例如 笔者在做Dolby Atmos的bass management的时候 希望将顶置的低频成分分割到左右通道或环绕通道 因为相位的缘故 叠加之前 左右通道或环绕
  • windows

    1 准备工作 准备U盘 格式化U盘 注意选择格式化的文件系统 可以鼠标右键C盘查看 然后将U盘格式化 好像是跟电脑引导模式相关UEFI gt NTFS 如果格式化的时候没有选对文件系统 那么在BIOS界面可能无法识别到U盘 进入官网下载制作
  • 04_kibana 7.4.2 安装和配置指南

    本文大纲 1 Kibana 的下载方式 1 官网直接下载 2 Linux 服务器直接下载 需要能够访问互联网的服务器 2 修改配置 3 kibana 的关闭和重启 首先 值得高兴的是kibana7 x 已经有官方中文的啦 更加方便我们的开发
  • WebGL系列 - 裁剪空间矩阵优化

    该系列仅为记录自己的学习相关知识 以 2d 的顶点着色器为例
  • 模型评估相关参数学习

    training process loss accurancy val loss val accurancy testing process classification report label predict digits 8 labe
  • 【服务器】交换机带外管理和带内管理

    一 交换机的带外管理是什么 在带外管理模式中 网络的管理控制信息与用户网络的承载业务信息在不同的逻辑信道传送 带外管理最大的优势在于 当网络出现故障中断时数据传输和管理都可以正常进行 不同的物理通道传送管理控制信息和数据信息 两者完全独立
  • Activiti 学习(二)—— Activiti 流程定义和部署

    概述 在这一节 我们将创建一个 Activit 工作流 并启动这个流程 主要包含以下几个步骤 定义流程 按照 BPMN 的规范 使用流程定义工具 用流程符号把整个流程描述出来 部署流程 把画好的流程定义文件 加载到数据库中 生成表的数据 流
  • No module named 'numpy.core._multiarray_umath'

    导入tensorflow后遇到No module named numpy core multiarray umath 原因是numpy的当前版本过低 解决办法 更新numpy的版本 命令行输入 pip install i https pyp
  • java if oracle,JAVA使ORACLE 实现DROP TABLE IF EXISTS的功能

    JAVA使ORACLE 实现DROP TABLE IF EXISTS的功能 ORACLE没有MYSQL等数据库的DROP TABLE IF EXISTS 使用起来非常不便 删表还要求表必须存在 不存在则删表报错 太麻烦了 如果能实现其他数据
  • 学习Spring必学的Java基础知识(8)----国际化信息

    b size x large 引述 size b 要学习Spring框架的技术内幕 必须事先掌握一些基本的Java知识 正所谓 登高必自卑 涉远必自迩 以下几项Java知识和Spring框架息息相关 不可不学 我将通过一个系列分别介绍这些J
  • MySql 查询方法总结

    一 示例数据 dept表 emp表 二 查询方法 1 內连查询 a 隐式内连 select xxx from xxx where 条件 b 显示内连 select xxx from xxx inner jion xxx on 条件 2 外连
  • IDEA 接口方法不能跳转到实体类实现方法的问题

    IDEA 接口方法不能跳转到实体类实现方法的问题 问题描述 原因分析 解决方案 总结 问题描述 没有跳入到实体类实现方法的I 向下的箭头图标 原因分析 原因极大可能是因为编辑器自带的代码高亮工具 Syntaxhighlighte 失效 以下
  • 版本号对比 -- Python实现

    相同位数版本号大小比较 1 def abc str1 str2 2 if str1 or str2 3 print 输入包含空字符串 请重新输入 4 return 输入包含空字符串 请重新输入 5 elif str1 str2 6 prin
  • Unity3D项目输出到iOS设备体验

    很久以前就听说过这个软件个了 当时觉得有cocos2d就够用了 开发一般的手机游戏应该不成问题了 后来还学习了一下cocos3d 最近突然想看一下这个传说中的Unity3D 安装上之后 里边自带有一个demo 点了一下播放按键 发现这个de
  • 半监督结点分类

    3 半监督结点分类 我们已经介绍过了一个简单但是灵活的可在图上进行有效信息传播的模型f X A 现在我们可以回过头来看半监督结点分类的问题了 就像本文的介绍中所简要概述的那样 我们可以通过在数据集X和基础图结构的邻接矩阵A上调整来我们的模型
  • netty权威指南学习笔记二——netty入门应用

    经过了前面的NIO基础知识准备 我们已经对NIO有了较大了解 现在就进入netty的实际应用中来看看吧 重点体会整个过程 按照权威指南写程序的过程中 发现一些问题 当我们在定义handler继承ChannelHanderAdapter时候
  • linux脚本

    程序后台运行 nohup java jar xxx jar gt hello log 后台运行java jar命令 并且将日志输出到hello log文件 防火墙 开启防火墙 systemctl start firewalld 开放指定端口
  • 子组件多次复用且传参到父组件时遇到的一些问题。

    问题描述 我们都知道 父子组件之间传参用props 子向父用 emit 兄弟间有bus 但是今天遇到个问题 A组件是一个selector选择器小组件 根据传参不同选择项目也不同 返回结果也不同 B组件中使用了4次A组件 传参都不一样 且需要