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

父组件

questionList  : 传递数据参数

questionsLists: 传递数据源

子组件

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

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

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

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

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

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

Vue中 父子传值 数据丢失问题的更多相关文章

  1. Vue中父子组件执行的先后顺序

    Vera   Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...

  2. Vue中父子组件执行的先后顺序探讨

    前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...

  3. 第七十四篇：Vue组件父子传值

    好家伙, 1.组件之间的关系 在项目开发中,组件之间的最常见关系分为如下两种: (1)父子关系 (2)兄弟关系 2.父子之间的数据共享 (1)父->子共享数据 父组件向子组件共享数据需要使用自定 ...

  4. vue中prop传值时加不加v-bind（冒号：）

    前言:有关Vue中父组件通过prop传值给子组件时,是否加v-bind的问题,没弄清楚时感觉很乱,弄清楚之后很简单. 由于结果记起来很容易,所以先给出结果: 只有传递字符串常量时,不采用v-bind形 ...

  5. 简述vue中父子组件是怎样相互传递值的（基础向）

    前言 首先,你需要知道vue中父组件和子组件分别指的是什么?   父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...

  6. vue中父子组件之间的传值、非父子组件之间的传值

    在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...

  7. vue中父子间传值和非父子间传值

    vue传值一般分三种方式:父组件向子组件传值.子组件向父子间传值.非父子组件进行传值 一.父组件向子组件传值:父组件引用子组件后,通过数据绑定(v-bind)向子组件传值 父组件: <templ ...

  8. vue 中父子组件传值：props和$emit

    更新----------- 1 父组件向子组件传值:通过props数组: 在vue-cli Login.vue父组件中有AcceptAndRefuse.vue子组件,首先import进子组件hello ...

  9. vue中父子组件传值问题 通过props 和 $emit()方法

    (代码在最后) 1.父组件给子组件传值直接通过props,听着很简单,但是对于初学者来说还是比较难以理解的,今天小白通过自己的实践操作结合代码分析一下 案例  把模态框单独的抽离出来,当作一个组件 第 ...

随机推荐

  1. 题解 P2949 【[USACO09OPEN]工作调度Work Scheduling】

    P2949 [USACO09OPEN]工作调度Work Scheduling 题目标签是单调队列+dp,萌新太弱不会 明显的一道贪心题,考虑排序先做截止时间早的,但我们发现后面可能会出现价值更高却没有 ...

  2. python基础练习 斐波那契数列

    转载于知乎刘奕聪的方法 一 f = [1, 1]print([f.append((f[-1] + f[-2])) or f.pop(0) for i in range(100)]) ///  f.ap ...

  3. 科密指纹考勤机B329采集

    昨天项目用到了科密指纹考勤机B329. 暂记录下碰到的问题,及其解决办法,以备查询. 1.下载科密的二次开发包SDK“10079” .地址:( http://pan.baidu.com/s/1i39m ...

  4. Netty中的装饰者模式

    装饰者的应用 所谓装饰者,说白了,目的就是对现有的对象进行增强,装饰者设计模式最大的优点就是,它在扩展类原有功能的基础上还避免的类爆炸的情况 Netty中的装饰者模式的应用 ByteBuf是netty ...

  5. javaScript常用运算符和操作符总结

    javaScript常用运算符和操作符总结 类别 操作符 算术操作符 +. –. *. /. %(取模) 字符串操作符 + 字符串连接   +=字符串连接复合 布尔操作符 !. &&. ...

  6. HomeBrew 安装

    HomeBrew中文地址 通过以上链接把安装地址拿到, 这个地址可能会变, 再次使用需要重新获取: /usr/bin/ruby -e "$(curl -fsSL https://raw.gi ...

  7. 大型系列课程之-七夕告白之旅vbs篇

    也许,世间所有的美好的东西,都是需要仪式感的,遇到了一年一度的七夕节,怎么过这个节日,成了很多心中有爱的人关注的事情,七夕不浪漫,人间不值得,七夕,发源于中国,这个美好的节日,来自动人的神话故事传说牛 ...

  8. 分布式ID系列之为什么需要分布式ID以及生成分布式ID的业务需求

    为什么需要分布式id生成系统 在复杂分布式系统中,往往需要对大量的数据和消息进行唯一标识.如在美团点评的金融.支付.餐饮.酒店.猫眼电影等产品的系统中,数据日渐增长,对数据分库分表后需要有一个唯一ID ...

  9. Unity经典游戏教程之：冒险岛

    版权声明: 本文原创发布于博客园"优梦创客"的博客空间(网址:http://www.cnblogs.com/raymondking123/)以及微信公众号"优梦创客&qu ...

  10. React 基于antd+video.js实现m3u8格式视频播放及实时切换

    文档连接地址(官网看起麻烦,看中文别人整理好的)https://blog.csdn.net/a0405221/article/details/80923090 React项目使用  安装依赖 npm ...