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


Posted in Javascript onAugust 27, 2019

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

父组件

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

questionList :传递数据参数

questionsLists: 传递数据源

子组件

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

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

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

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

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

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

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

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

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

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

总结

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

Javascript 相关文章推荐
js 实现复制到粘贴板的功能代码
May 13 Javascript
js通过地址栏给action传值(中文乱码全是问号)
May 02 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
JS组件中bootstrap multiselect两大组件较量
Jan 26 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 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实现网上点歌(二)
2006/10/09 PHP
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
让python json encode datetime类型
2010/12/28 Python
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
python实现的解析crontab配置文件代码
2014/06/30 Python
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
捐款倡议书范文
2014/02/02 职场文书
我的祖国演讲稿
2014/05/04 职场文书
公开承诺书格式
2014/05/21 职场文书
2015元旦标语横幅
2014/12/09 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
小学国庆节活动总结
2015/03/23 职场文书
院系推荐意见
2015/06/05 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
Django使用channels + websocket打造在线聊天室
2021/05/20 Python