解决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实现设置、移除文本框默认值功能
Jan 13 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
基于node.js之调试器详解
Aug 22 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
node将geojson转shp返回给前端的实现方法
May 29 Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 Javascript
JS写滑稽笑脸运动效果
May 28 Javascript
JavaScript仿京东轮播图效果
Feb 25 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 默默经典版本
2009/08/04 PHP
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
php中++i 与 i++ 的区别
2012/08/08 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
Symfony生成二维码的方法
2016/02/04 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
举例讲解Python中装饰器的用法
2015/04/27 Python
python生成式的send()方法(详解)
2017/05/08 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
详解python statistics模块及函数用法
2019/10/27 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
校园十佳歌手策划书
2014/01/22 职场文书
关于期中考试的反思
2014/02/02 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
大学生简短的自我评价
2014/09/12 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers