解决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 使用手册(二)
Sep 23 Javascript
jquery动态添加删除(tr/td)
Feb 09 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
Javascript作用域和作用域链原理解析
Mar 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通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
显示js对象所有属性和方法的函数
2009/10/16 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
深入理解node.js http模块
2018/01/24 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
python ip正则式
2009/05/07 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
Python如何实现定时器功能
2020/05/28 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
本科毕业生专业自荐书范文
2014/02/05 职场文书
商场促销活动方案
2014/02/08 职场文书
高中军训感言200字
2014/02/23 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android