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


Posted in Javascript onAugust 27, 2019

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

父组件

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

questionList :传递数据参数

questionsLists: 传递数据源

子组件

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

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

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

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

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

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

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

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

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

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

总结

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

Javascript 相关文章推荐
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
javascript闭包的高级使用方法实例
Jul 04 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
javascript异步编程的六种方式总结
May 17 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
js笔试题-接收get请求参数
Jun 15 Javascript
Node.js学习教程之Module模块
Sep 03 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 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
在IIS上安装PHP4.0正式版
2006/10/09 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
学习ExtJS table布局
2009/10/08 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
Vue配置marked链接添加target="_blank"的方法
2019/07/19 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
Python数据库的连接实现方法与注意事项
2016/02/27 Python
理解Python中的With语句
2016/03/18 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
python join方法使用详解
2019/07/30 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
Java基础类库面试题
2013/09/04 面试题
《假如》教学反思
2014/04/17 职场文书
综治宣传月活动总结
2014/04/28 职场文书
走进敬老院活动总结
2014/07/10 职场文书
医药销售自我评价200字
2014/09/11 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
教师岗位说明书
2015/09/30 职场文书
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript
Python如何识别银行卡卡号?
2021/06/10 Python