解决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.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
jQuery实现列表的全选功能
Mar 18 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
JS中async/await实现异步调用的方法
Aug 28 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
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
php curl发送请求实例方法
2019/08/01 PHP
jQuery 页面 Mask实现代码
2010/01/09 Javascript
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
JS编程小常识很有用
2012/11/26 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
Python的组合模式与责任链模式编程示例
2016/02/02 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
Python中and和or如何使用
2020/05/28 Python
求职简历中的自我评价分享
2013/12/08 职场文书
超市重阳节活动方案
2014/02/10 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
爱心捐书活动总结
2014/07/05 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
通知怎么写?
2019/04/17 职场文书
Python基础之条件语句详解
2021/06/16 Python