说明:

近日开发中碰见一个很诡异的问题,  父组件动态的修改对象 data 中的值, 然后将这个对象 data 传给子组件, 子组件拿到后将 data 中的值 乘以 100 ,发现父组件中的值也跟着变化了,通过查阅资料,发现 是 VUE 双向绑定中的一个bug,就此给出解决办法,亲测有效

情景描述:

对象  data = {

  price: 0,

  flag: true,

  name: " 哈哈 "

}

父组件 更改 data.parice = 100,   然后将 data对象 传给子组件, 子组件接收到对象data ,  将data.price * 100,  接口调用完成后, 父组件中的data.price 变成了   10000;

解决办法:

1、不给子组件传对象,传给子组件单独的一个 price 值;

2、可以传对象 data, 需要将 data 处理,  JSON.parse(JSON.stringify(data ))  两次转换后就解决了该问题;

vue 解决双向绑定中 父组件传值给子组件后 父组件值也跟着变化的问题的更多相关文章

  1. 【转】Vue组件一-父组件传值给子组件

    Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...

  2. vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。

    vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...

  3. VUE的双向绑定及局部组件的使用

    vue的双向绑定,使用v-model,v-model只能使用在input  textare    select中 <!DOCTYPE html> <html lang="z ...

  4. 父组件传值给子组件的v-model属性

    父组件如何修改子组件中绑定的v-model属性 因为v-model属性是双向数据绑定,而vue的通信方式又是单向通信,所以,当子组件想要改变父组件传过来的值的属性时,就会报错,典型的就是父组件传值给子 ...

  5. 揭密 Vue 的双向绑定

    Vue 中需要输入什么内容的时候,自然会想到使用 <input v-model="xxx" /> 的方式来实现双向绑定.下面是一个最简单的示例 剖析Vue原理& ...

  6. 西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

  7. vue的双向绑定和依赖收集

    在掘金上买了一个关于解读vue源码的小册,因为是付费的,所以还比较放心 在小册里看到了关于vue双向绑定和依赖收集的部分,总感觉有些怪怪的,然后就自己跟着敲了一遍. 敲完后,发现完全无法运行,  坑啊 ...

  8. Vue.js双向绑定的实现原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...

  9. Vue.js双向绑定的实现原理和模板引擎实现原理(##########################################)

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

随机推荐

  1. python - class类 (七) 三大特性 - 封装 结尾

    封装: # 封装 #第一层,类就是麻袋,本身就是一种封装 #第二层,类中定义私有的,至在类的内部使用,外部无法访问 #第三层,封装在于明确区分内外,使得类实现者可以修改封装内的东西二不影响外部调用者 ...

  2. 基于URL的权限管理(三)

    思路:先创建一个专门的类ActiveUser用于存储用户登录的信息,主要用于存储用户id,账户,名称,菜单,权限. 认证拦截器主要是查看用户是否已登陆,如果没有转发到登陆界面,用户用账户跟密码登录时候 ...

  3. 改环境变量改出问题了,vi,ls这些命令都不能用了,怎么办

    1.出现这个问题肯定是以前的基本环境变量都用不了了(大部分情况就是多了一个空格) 解决办法: cd /usr/bin 下执行vi命令  修改环境变量  然后source /etc/profile   ...

  4. Spring使用RMI进行远程方法调用

    (1).我新建了三个项目,SpringRmiApi(存放提供者和消费者共有的xx,例如实体类以及服务接口等等).SpringRmiService(服务提供者).SpringRmiProvider(服务 ...

  5. Linux: 介绍make menuconfig中的每个选项含义【转】

    转自:http://blog.csdn.net/gaoyuanlinkconcept/article/details/8810468 介绍make menuconfig中的每个选项含义 Linux 2 ...

  6. ES系列九、ES优化聚合查询之深度优先和广度优先

    1.优化聚合查询示例 假设我们现在有一些关于电影的数据集,每条数据里面会有一个数组类型的字段存储表演该电影的所有演员的名字. { "actors" : [ "Fred J ...

  7. suse系统开启ssh方法

    1.防火墙放开ssh服务 打开/etc/sysconfig/SuSEfirewall2 文件,FW_SERVICES_EXT_TCP="ssh"可以定义开放ssh的服务 2.编辑s ...

  8. oracle 回退表空间清理

    1.查看已有表空间,找到回退表空间 SELECT * FROM DBA_TABLESPACES WHERE CONTENTS='UNDO' 2.创建新的回退表空间 create undo tables ...

  9. JQ初学总结一

    Jquery是最火的JavaScript库,大部分web开发都会用到就jquery,而作为初学者看了一些jq的用法总结自己的学习以增强自己的认知. 普通的javascript的缺点是:每种控件的操作方 ...

  10. python----多继承C3算法

    https://blog.csdn.net/fmblzf/article/details/52512145