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


Posted in Javascript onAugust 27, 2019

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

父组件

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

questionList :传递数据参数

questionsLists: 传递数据源

子组件

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

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

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

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

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

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

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

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

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

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

总结

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

Javascript 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
发一个自己用JS写的实用看图工具实现代码
Jul 26 Javascript
潜说js对象和数组
May 25 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 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
第1次亲密接触PHP5(2)
2006/10/09 PHP
桌面中心(二)数据库写入
2006/10/09 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
python解析html开发库pyquery使用方法
2014/02/07 Python
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
python爬取指定微信公众号文章
2018/12/20 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
房屋授权委托书范本
2014/10/07 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
拾金不昧通报表扬范文
2015/05/05 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python