解决Vue中 父子传值 数据丢失问题


Posted in Javascript onAugust 27, 2019

在Vue中,父子组件传值,子组件通过props接收父组件传递的数据

父组件

解决Vue中 父子传值 数据丢失问题

questionList :传递数据参数

questionsLists: 传递数据源

子组件

解决Vue中 父子传值 数据丢失问题

解决Vue中 父子传值 数据丢失问题

解决Vue中 父子传值 数据丢失问题

porps 接收父组件方式有俩中,一种是通过对象形式,一种是通过数组形式,通过数组形式接收多个数据时用逗号隔开即可。比如:props:['a','b']。

需要注意的是在子组件中 接收父组件的数据参数,必须和父组件传递时的 参数一致,上图中的 questionList

这种情况下会出现这么一个情况,刷新页面之后子组件接收的父组件数据会丢失,我们可以在watch里面去监听一下数据的变化。

解决Vue中 父子传值 数据丢失问题

重新对数据进行想要的处理,之后就会发现 怎么刷新都没有问题了,数据都不会丢失。

-------------------------------分割线----------------------------------------

在这个过程中发现,在子组件的实例中 是有数据的,但是重新赋值给一个新对象,新对象的值永远是为空的。这个还没有清楚是怎么回事。有了解的 可以告知一下呀?

总结

以上所述是小编给大家介绍的解决Vue中 父子传值 数据丢失问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery 图片预加载 自动等比例缩放插件
Dec 25 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
jquery比较简洁的软键盘特效实现方法
Mar 19 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
微信小程序进入广告实现代码实例
Sep 19 Javascript
微信小程序入门之指南针
Oct 22 Javascript
Javascript中的解构赋值语法详解
Apr 02 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 #Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 #Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 #Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 #Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 #jQuery
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 #Javascript
javascript实现抢购倒计时程序
Aug 26 #Javascript
You might like
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
jquery阻止后续事件只执行第一个事件
2014/07/24 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
Javascript之String对象详解
2016/06/08 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
Keras搭建自编码器操作
2020/07/03 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
python 基于opencv实现图像增强
2020/12/23 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
技校生自我鉴定范文
2013/09/26 职场文书
最新的大学生找工作自我评价
2013/09/29 职场文书
护理专科毕业推荐信
2013/11/10 职场文书
《自然之道》教学反思
2014/02/11 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
文明演讲稿范文
2014/05/12 职场文书
2014年德育工作总结
2014/11/20 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
2015年暑假工作总结
2015/07/13 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers