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 ...
随机推荐
- Dom4j向XML中增加节点与属性——(四)
先获取到节点,然后在节点山添加Element 添加节点 添加属性 设置开始标签与结束标签的值book.addElement("描述").addAttribute("nam ...
- Django开发笔记三
Django开发笔记一 Django开发笔记二 Django开发笔记三 Django开发笔记四 Django开发笔记五 Django开发笔记六 1.基于类的方式重写登录:views.py: from ...
- ProcessHacker可编译版本
说明 做一个批量进程内搜索字符串的工具. 试了processhacker-2.39-src.zip. https://sourceforge.net/projects/processhacker/fi ...
- 简述JavaScript作用域与作用域链
关于变量作用域的知识,相信学习JavaScript的朋友们一定早已经接触过,这里简单列举: JavaScript中变量是以对象属性的形式存在的:全局变量是全局对象的属性:局部变量是声明上下文对象的属性 ...
- [转] bss段、data段、text段
1.前言 一个程序本质上都是由 BSS 段.DATA段.TEXT段三个组成的. 本文主要分编译时和运行时分别对 对data段 bss段 text段 堆 栈作一简要说明 2. 程序编译时概念说明 程序与 ...
- [转]SPI通信原理简介
[转自]http://www.cnblogs.com/deng-tao/p/6004280.html 1.前言 SPI是串行外设接口(Serial Peripheral Interface)的缩写.是 ...
- K最近邻kNN-学习笔记
# -*- coding: utf-8 -*- """ Created on Thu Jan 24 09:34:32 2019 1. 翼尾花数据 2. 用 KNeighb ...
- 基于Golang设计一套微服务架构[转]
article- @嘟嘟噜- May/26/2018 18:35:30 如何基于Golang设计一套微服务架构 微服务(Microservices),这个近几年我们经常听到.那么现在市面上的的微服 ...
- CF1081A
CF1081A 题意: 从
- 如何通过编译Linux内核打开IPVS(LVS)的debug模式
前言 为了定位keepalived VIP的问题, 一步一步定位到IPVS, IPVS默认是没有打开Debug模式的, 若需要打开Debug模式需要重新编译IPVS模块加载后才行, 最好的方式当然是仅 ...