说明:

近日开发中碰见一个很诡异的问题,  父组件动态的修改对象 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. AutoMapper中用户自定义转换

    Custom Type Converters Sometimes, you need to take complete control over the conversion of one type ...

  2. Python数据分析入门

    Python数据分析入门 最近,Analysis with Programming加入了Planet Python.作为该网站的首批特约博客,我这里来分享一下如何通过Python来开始数据分析.具体内 ...

  3. JavaScript内置对象——Math对象

    这几天在刷leetcode的时候用到了一些Math对象的知识,故作一下总结~ JavaScript中的Math对象也是一个常见的内置对象,然而与String等其它常见对象不同,Math对象没有构造函数 ...

  4. [转]UART通信简介

    1.前言 UART通信,即通用异步收发传输器(Universal Asynchronous Receiver/Transmitter). 串行通信是指利用一条传输线将资料一位位地顺序传送.特点是通信线 ...

  5. 驱动开发--【字符设备、块设备简介】【sky原创】

    驱动开发   字符设备,块设备,网络设备   字符设备 以字节流的方式访问, 不能随机访问 有例外,显卡.EEPROM可以随机访问   EEPROM可以擦写1亿次,是一种字符设备,可以随机访问 读写是 ...

  6. word文档里打不开公式 打开后都是方框

    因为系统缺少一种字体,只要到网络上下载或到其他计算机中复制一种文件名为“symbol.ttf”的字体文件来安装上,就可以了.参考资料:Office之家 http://www.officejia.com ...

  7. HTML学习笔记03-HTML基础

    <!DOCTYPE HTML> <html> <head> <title> </title> </head> <body& ...

  8. System.Runtime.InteropServices.COMException (0x800A03EC): 无法访问文件

    使用Microsoft.Office.Interop.Excel 操作 今天在服务器部署,操作程序csv文件转xsl文件的时候,遇到一下问题: System.Runtime.InteropServic ...

  9. 018_nginx_proxy死循环问题

    今天线上遇到一个请求一次,触发多次的请求,而且直接把nginx机器压垮了.经排查,经过如下: 一. server{ server www.jyall.com; location /latestrele ...

  10. mysql删除数据库文件ibdata1后引发的故障

    进行性能测试是发现大量报错: Duplicate entry主键重复 可以看到mysql数据库中已经没有innodb引擎启动信息了 之前发现ibdata1占用了大量硬盘,为了省出空间删除了数据库ibd ...