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


Posted in Javascript onAugust 27, 2019

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

父组件

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

questionList :传递数据参数

questionsLists: 传递数据源

子组件

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

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

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

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

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

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

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

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

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

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

总结

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

Javascript 相关文章推荐
javascript 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
jQuery之过滤元素操作小结
Nov 30 Javascript
深入理解JQuery keyUp和keyDown的区别
Dec 12 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
有关Promises异步问题详解
Nov 13 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
vue2使用keep-alive缓存多层列表页的方法
Sep 21 Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 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二分法查找数组是否包含某一元素
2013/05/23 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
php多用户读写文件冲突的解决办法
2013/11/06 PHP
使用swoole扩展php websocket示例
2014/02/13 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
详解JS数值Number类型
2018/02/07 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
Django之模板层的实现代码
2019/09/09 Python
python Pexpect模块的使用
2020/12/25 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
招商引资工作汇报
2014/10/28 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL