vue 解决双向绑定中 父组件传值给子组件后 父组件值也跟着变化的问题
说明:
近日开发中碰见一个很诡异的问题, 父组件动态的修改对象 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 解决双向绑定中 父组件传值给子组件后 父组件值也跟着变化的问题的更多相关文章
- 【转】Vue组件一-父组件传值给子组件
Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- VUE的双向绑定及局部组件的使用
vue的双向绑定,使用v-model,v-model只能使用在input textare select中 <!DOCTYPE html> <html lang="z ...
- 父组件传值给子组件的v-model属性
父组件如何修改子组件中绑定的v-model属性 因为v-model属性是双向数据绑定,而vue的通信方式又是单向通信,所以,当子组件想要改变父组件传过来的值的属性时,就会报错,典型的就是父组件传值给子 ...
- 揭密 Vue 的双向绑定
Vue 中需要输入什么内容的时候,自然会想到使用 <input v-model="xxx" /> 的方式来实现双向绑定.下面是一个最简单的示例 剖析Vue原理& ...
- 西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
- vue的双向绑定和依赖收集
在掘金上买了一个关于解读vue源码的小册,因为是付费的,所以还比较放心 在小册里看到了关于vue双向绑定和依赖收集的部分,总感觉有些怪怪的,然后就自己跟着敲了一遍. 敲完后,发现完全无法运行, 坑啊 ...
- Vue.js双向绑定的实现原理
Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...
- Vue.js双向绑定的实现原理和模板引擎实现原理(##########################################)
Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...
随机推荐
- iOS视频流开发(1)—视频基本概念
iOS视频流开发(1)-视频基本概念 手机比PC的优势除了便携外,她最重要特点就是可以快速方便的创作多媒体作品.照片分享,语音输入,视频录制,地理位置.一个成功的手机APP从产品形态上都有这其中的一项 ...
- 【API】恶意样本分析手册——API函数篇
学编程又有材料了 http://blog.nsfocus.net/malware-sample-analysis-api/
- Libevent源码分析系列
1.使用libevent库 源码那么多,该怎么分析从哪分析呢?一个好的方法就是先用起来,会用了,然后去看底层相应的源码,这样比较有条理,自上向下掌握.下面用libevent库写个程序,每隔1秒 ...
- 硬盘SMART参数解释
Raw Read Error Rate 底层读取错误率,高值暗示盘体/磁头有问题 Throughput Performance 读写通量性能 (越高越好) ...
- tomcat jsp页面乱码解决
浏览器接收服务器响应的中文参数: JSP页面中告诉浏览器使用什么编码: <%@ page language="java" contentType="text/htm ...
- eclipse:刪除空行
ctrl+F:選擇正則,輸入:^\s*\n ,點擊 replace all.
- Spring整合strus2简单应用总结
本身strus2没接触过,所以这块学的一知半解,正常不整合的还没学(接着学) step: 1.创建web工程 2.在/WEB-INF/lib引入jar包 asm-3.3.jarasm-commons- ...
- Redis的Multi的内幕真相
今天遇到个Redis奇慢的问题,断点分析发现跟multi有关. 由于本人太忙不想去阅读Redis Server的源代码(其实是懒),就通过TCPDump来分析吧. 步骤: 1. 先在Redis Ser ...
- Python3-RabbitMQ 3.7.2学习——环境搭建(一)
学习消息队列,就要把环境先装好,本人使用的是python3.5.2和RabbitMQ 3.7.2,在装RabbitMQ之前,先要装Erlang,一定要. 1.环境:win10系统 python3 ...
- 基于GTID环境的数据恢复
下面说一个线上环境的数据恢复案例,线上环境误操作的事情,随时都有可能发生的,这时候运维DBA或者DBA会想,没人会傻到把数据库干掉的吧?又或者没有会闲得蛋痛删除了几条数据又想恢复这么无聊吧?适适这样的 ...