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


Posted in Javascript onAugust 27, 2019

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

父组件

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

questionList :传递数据参数

questionsLists: 传递数据源

子组件

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

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

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

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

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

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

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

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

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

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

总结

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

Javascript 相关文章推荐
Extjs 几个方法的讨论
Jan 28 Javascript
基于jquery的跨域调用文件
Nov 19 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
Jan 10 Javascript
js清理Word格式示例代码
Feb 13 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
javascript实现拖拽碰撞检测
Mar 12 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
打造计数器DIY三步曲(下)
2006/10/09 PHP
怎样在PHP中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
Wordpress php 分页代码
2009/10/21 PHP
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
对Django url的几种使用方式详解
2019/08/06 Python
python 录制系统声音的示例
2020/12/21 Python
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
个人简历自我评价范文
2014/02/04 职场文书
合伙协议书范本
2014/04/21 职场文书
党员干部一句话承诺
2014/05/30 职场文书
小学生春游活动方案
2014/08/20 职场文书
个人合伙协议书范本
2014/10/14 职场文书
求职自荐信怎么写
2015/03/04 职场文书
电影复兴之路观后感
2015/06/02 职场文书
贫困证明怎么写
2015/06/16 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS