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


Posted in Javascript onAugust 27, 2019

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

父组件

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

questionList :传递数据参数

questionsLists: 传递数据源

子组件

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

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

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

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

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

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

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

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

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

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

总结

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

Javascript 相关文章推荐
Javascript技术技巧大全(五)
Jan 22 Javascript
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
简述JS控制台的使用
Jul 15 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
详解vue项目打包步骤
Mar 29 Javascript
JS实现马赛克图片效果完整示例
Apr 13 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
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
php通过COM类调用组件的实现代码
2012/01/11 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
jQuery select的操作实现代码
2009/05/06 Javascript
jQuery 页面 Mask实现代码
2010/01/09 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
浅谈JS函数节流防抖
2017/10/18 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
Python决策树和随机森林算法实例详解
2018/01/30 Python
python Opencv将图片转为字符画
2021/02/19 Python
详解flask入门模板引擎
2018/07/18 Python
带你认识Django
2019/01/15 Python
python几种常用功能实现代码实例
2019/12/25 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
Django中的session用法详解
2020/03/09 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
五一服装活动方案
2014/01/11 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技