解决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 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
jquery animate图片模向滑动示例代码
Jan 26 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
js实现浏览器打印功能的示例代码
Jul 15 Javascript
Vue使用轮询定时发送请求代码
Aug 10 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 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文件操作实例代码
2012/05/10 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
Python httplib,smtplib使用方法
2008/09/06 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
门卫岗位职责
2013/11/15 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
药剂专业自荐书
2014/06/20 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
Java实现学生管理系统(IO版)
2022/02/24 Java/Android