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 ))  两次转换后就解决了该问题;

原文地址:https://www.cnblogs.com/aoqizhonghua/p/10565988.html

时间: 2024-08-01 13:08:07

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

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

Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息,父组件监听消息 分发内容 整个博客使用的源代码-请点击 所以将用三篇博客分别进行介绍以上三种情况和使用 Vue的设计者对组件的理解 Vue的设计者,对组件和父组件之间的关系流上做了阐述,即单向数据流图:父组件向子组件传递数据,子组件回馈事件 组件意味着协同工作,通常父子组件会是这样的关系:组件 A

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

vue的双向绑定,使用v-model,v-model只能使用在input  textare    select中 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=

Vue的双向绑定以及组件的自定义事件

什么是双向绑定 所谓的双向绑定是指数据发生变化时,视图会同步发生变化,而当视图发生变化时,数据也会同步变化. Vue中怎么实现双向绑定 在Vue中,我们通过v-model来创建双向绑定. 我们继续用todolist和todoitme组件来示例双向绑定 在App.vue的data中增加一个message. data(){ return{ message:"hello world", list: [ { title: "新课程1", del: false }, { ti

揭密 Vue 的双向绑定

Vue 中需要输入什么内容的时候,自然会想到使用 <input v-model="xxx" /> 的方式来实现双向绑定.下面是一个最简单的示例 <div id="app"> <h2>What's your name:</h2> <input v-model="name" /> <div>Hello {{ name }}</div> </div> new

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

Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少的代码实现那个hello world开篇示例. 参考文章:https://segmentfault.com/a/1190000006599500 一.访问器属性 访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过defineProperty()方法单独定义. var obj = {

Vue.js双向绑定原理

Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属性 访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过defineProperty()方法单独定义. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

vue的双向绑定原理及实现

前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图来吸引各位: 代码:                                                                    效果图:   是不是看起来跟vue的使用方式差不多?接下来就来从原理到实现,从简到难一步一步来实现这个SelfVue.由于本文只是为了学习和分享

Vue数据双向绑定原理及简单实现

嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. 一.示例 var vm = new Vue({ data: { obj: { a: 1 } }, created: function () { console.log(this.obj); } }); 二.实现原理 vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的. 1)数据劫

vue的双向绑定原理浅析与简单实现

很久之前看过vue的一些原理,对其中的双向绑定原理也有一定程度上的了解,只是最近才在项目上使用vue,这才决定好好了解下vue的实现原理,因此这里对vue的双向绑定原理进行浅析,并做一个简单的实现. vue双向绑定的原理浅析 vue数据的双向绑定是通过数据劫持,并结合发布-订阅模式的方式来实现的. 我们先通过一个最简单的vue例子来查看vue初始化数据上的对象到底是什么东西. var vm = new Vue({ data: { // 双向绑定的数据对象 obj: { a: 1 } }, cre