解决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 12 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
详解Immutable及 React 中实践
Mar 01 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 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 采集书并合成txt格式的实现代码
2009/03/01 PHP
深入PHP curl参数的详解
2013/06/17 PHP
深入理解PHP中的Session和Cookie
2013/06/21 PHP
Symfony生成二维码的方法
2016/02/04 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
jQuery操作cookie
2016/08/08 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
Python如何存储数据到json文件
2020/03/09 Python
python能在浏览器能运行吗
2020/06/17 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
会计人员演讲稿
2014/09/11 职场文书
合作意向协议书
2015/01/29 职场文书
考察邀请函范文
2015/01/31 职场文书
专家推荐信范文
2015/03/26 职场文书
电台广播稿范文
2015/08/19 职场文书
Vue vee-validate插件的简单使用
2021/06/22 Vue.js
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技