解决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统计用户下载网页所需时间的脚本
Oct 15 Javascript
javascript 打开页面window.location和window.open的区别
Mar 17 Javascript
javascript 闭包疑问
Dec 30 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
js事件(Event)知识整理
Oct 11 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 Javascript
Angular.js实现注册系统的实例详解
Dec 18 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
深入了解query和params的使用区别
Jun 24 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
header跳转和include包含问题详解
2012/09/08 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
php使用filter_var函数判断邮箱,url,ip格式示例
2019/07/06 PHP
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
Javascript 面向对象之重载
2010/05/04 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
python实现AES加密与解密
2019/03/28 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
python实现操作文件(文件夹)
2019/10/31 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
工程测量与监理专业应届生求职信
2013/11/27 职场文书
美发活动策划书
2014/01/14 职场文书
写给学生的新学期寄语
2014/01/18 职场文书
逃课上网检讨书
2014/02/20 职场文书
表彰会主持词
2014/03/26 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫