解决vue双向绑定bug，父组件向子组件传数组或者对象时，子组件修改传过来的数组或者对象时，父组件也相应的修改

最新推荐文章于 2023-02-06 09:50:49 发布
最新推荐文章于 2023-02-06 09:50:49 发布
阅读量3.1k 收藏 4
点赞数 1
文章标签： vue 双向绑定 父组件 子组件 传值
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuqixidi/article/details/102573572
版权

今天做项目时，遇到了一个特别奇怪的问题。

父组件向子组件传数组或者对象时，子组件修改传过来的数组或者对象时，父组件的数据也相应的修改。

翻看了一下vue官网，原话如下：

注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。

这个很坑，我想在子组件里修改，父组件里不修改。解决办法如下：

1、如果能传单独的值，就不要传数组或者对象。

2、必须传数组或者对象，就用 JSON.parse(JSON.stringify(data ))这种方法处理一下要传的数据。

更多文章，关注我的公众号

在这里插入图片描述

liuqixidi
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue父组件向子组件(props)传递数据的方法
11-29
vue页面结构 在做项目的时候常常有这样的一个情况，这个页面的数据（比如：id号）要带到另一个页面去查询某个数据的详情等，传统的作法不是在url上加参数，cookie或者是现在H5的“sessionStorage”和“localStorage”上赋值，这是页面之间传递的方法。 随着Angularjs,React,Vue的流行组件式的开发方式成为另一种不错的解决方案。 最近就有一些小伙伴问我，vue组件之间是如何传递参数的？其实vue是有三种方式可以组件之间传递数据（props，组件通信，slot），这次就说第一种方式如下： a父组件内容： 引入b子组件import b form ‘b.vue’
Vue中父组件向子组件通信的方法
08-30
Vue中父组件向子组件通信的方法 在 Vue 框架中，父组件向子组件通信是一种常见的场景。可以使用 props 将父组件的数据传递给子组件。子组件在接受数据时需要显示声明 props。在本文中，我们将通过一个实例来介绍 ...
Vue 组件（一）父组件向子组件传递数据
热门推荐
ZhaoYLi 的编程学习笔记
04-16 2万+
1、父组件通过props向子组件传递数据 组件不仅仅是要把模板的内容进行复用，更重要的是组件间要进行通信。通常父组件的模板中包含子组件，父组件要正向地向子组件传递数据或参数，子组件接收到后根据参数的不同来渲染不同的内容或执行操作。这个正向传递数据的过程就是通过 props 来实现的。 组件中，使用选项props来声明需要从父级接收的数据，props的值可以是两种： （1）字符串数组 我们...
8组件通信-父组件向子组件传递数据-数组
bc520bc的博客
01-17 585
三个注意点 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <cpn :cmovies='movies' :cm...
父组件向子组件传递数组格式数据，子组件为picker
qq_26780317的博客
06-03 1560
前言：在vue项目中，子组件是一个弹框，需要在父组件中显示此弹框,其弹框内容来自于父组件。父子组件之间的传值通过props来实现。 A为父组件页面，B为子组件页面。其中父组件页面调用子组件，v-bind绑定要传递的值chargePeriodArr。 A页面设置如下： 而chargePeriodArr是动态的，有一个地方给它赋值。 子组件B页面props接收父组件传过来的数据： 子组件接受父组件的值分为--引用类型和普通类型两种； ...
Vue组件间传参（1）---父子
大香蕉的博客
08-09 767
一、父组件向子组件传递数据 1、在子组件中使用props声明需要从父组件接收到的数据（props和methods、watch等同级） 两种方式： 方式一：字符串数组，每一项都是父组件传递的名称 例：props:['name','list'] 父组件引用的子组件：<子组件 :list = " 父组件组件中的变量 "><子组件> 方式二：对象，可以控制传递数据时...
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
10-15
总结起来，`sync`修饰符是Vue中处理子组件修改父组件prop的一种有效方法，它通过自定义事件实现了数据的“双向绑定”效果。通过理解其工作原理，开发者可以在保持单向数据流的同时，灵活地在组件间同步数据。在实际...
解决vue 子组件修改父组件传来的props值报错问题
10-16
Props允许父组件向子组件传递数据，但有一个关键原则需要注意：**子组件不应该直接修改父组件通过props传递过来的值**。这是因为在Vue的设计哲学中，组件应该是可复用的，而且应当保持数据流动的单向性，即数据从父...
解决Vue2.x父组件与子组件之间的双向绑定问题
08-27
"解决Vue2.x父组件与子组件之间的双向绑定问题" Vue.js是一款流行的前端框架，它提供了强大的组件化和数据绑定机制。但是，在使用Vue时，开发者经常遇到的一问题就是父组件与子组件之间的双向绑定问题。双向绑定是...
vue父组件异步获取数据传给子组件的方法
10-18
通过以上策略，可以有效地解决Vue中父组件异步数据传递给子组件时可能出现的问题，保证应用的稳定性和数据的一致性。在实际开发过程中，理解并灵活运用这些技术，有助于提升代码质量，减少错误的发生。希望这些内容...
vue 父组件、子组件对象改变_vue中子组件改变数组或对象的值，使父组件不受影响...
weixin_29164843的博客
12-24 792
在vue中，父组件传值给子组件通过，v-bind，众所周知，子组件要想改变父组件传的值，都要向父组件发送一下信号，即$emit()，但是我最近发现，有时候，子组件不emit，都可以改变父组件传来的变量的值，哪怕把父组件传的变量的值再赋值给另一个变量，改变该变量，也会改变父组件的对应变量的值，这是为啥呢，根据vue 父子组件传值 子组件修改父组件值的解决办法中提到的，我才发现，原来在 JavaScr...
父子组件的值关系，子组件修改props传过来的对象类型值，继而改变父组件的值
Baby_加油_的博客
06-11 2073
vue2.0中，子组件中不能修改父组件的状态，否则在控制台中会报错。 比如，父组件传给子组件一个变量，子组件只能接收这个值，不能修改这个值，修改会报错。想要修改，只能赋值给另一个data中定义的变量 但是，这仅限于props为非数组及对象等引用类型数据，譬如字符串，数字等 如果props是对象的话，在子组件内修改props的话，父组件是不会报错的，父组件的值也会跟着改变 父组件传递给子组件一...
在Vue中如果子组件想修改数据并且同步到父组件的办法！
weixin_38809190的博客
06-05 2954
如果子组件想修改数据并且同步更新到父组件，在一些情况下，我们可以使用.sync来做： 如图父组件 子组件： 这里我们需要注意的是： 1.sync不能和表达式一起使用如：v-bind:title.sync="doc.title + '!'"是无效的 2.sync不能用在字面量对象上：v-bind.sync="{ title: doc.title }"是无法正常工作的 3....
Vue动态添加和删除组件的实现，子组件和父组件的传值实例演示
小蓝枣的博客
02-06 2043
下面的卡片就是我单独封装的组件，保存的组件名为 Card.vue，代码中 mdb 开头是 MDBootstrap 框架里的组件。 内容较多，这里主要关注的点就是删除按钮还有给父组件传值的方法。 父组件里首先把子组件导入进来，然后根据数组、v-for 和 v-if 来实现动态添加组件。 点击新增会在数组里添加一个空字符串，点击删除会删除对应的字符串，这样加载组件的多少就与数组的大小对应了，然后通过 v-for 来遍历组件。
引用类型----对象和数组
wurourouzhang的博客
12-08 373
 1. 创建对象：对象（引用类型的值，是引用类型的一个实例）          创建Object实例。                   方法一：使用new操作符后跟Object构造函数。                                 var person = new Object();                                 person.na...
前端实习面试记录 2021年9月30日
simon0000888的博客
09-30 171
先是笔试，笔试主要是一些较为简单的代码解释输出。最后两道大题，第一道是要写出一个求和的函数，第二道是编写一个函数让其对输入的数组进行判断，若该数组中有两个数相加等于给定的另一个数，则将这个两个数的索引进行输出。twoSum([2,7,4,5,6],9) 面试时主要聊到了： 闭包： 1.变量作用域 要理解闭包，首先要理解变量JavaScript的特殊的变量的作用域。 变量的作用域有两种：全局变量和局部变量。 JavaScript的特别之处就在于：函数内部可以直接读取全局变量，但是函数...
vue------props组件传值时的类型及写法
COCOLI_BK的博客
12-18 3728
前置说明： 注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。 支持类型： type 可以是下列原生构造函数中的一个： String Number Boolean Array Object Date Function Symbol 额外的，type 还可以是一个自定义的...
vue父子组件搭配(添加数据和删除)
LuiChun
11-27 1022
<template> <div> <!-- 添加增加方法 传递给子组件--> <Shijian :addTodo="addTodo" /> <!-- 传递给子组件数据 --> <!-- 传递删除方法 子组件--> <Shijianone :todos="todos" :delTodo="delTodo" /> <!-- 传递给子组件 --> <.
vue_成功解决 vue 父传子，组件值更改问题
m0_48263336的博客
04-08 3284
一、问题描述： vue+springboot前后端分离项目中，一关闭评论弹窗，就报错：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "drawer" 二、报错原
vue3父组件怎么 向子组件传数组
最新发布
09-24
在Vue3中，可以使用props属性将数据从父组件传递给子组件。要向子组件传递一个数组，可以按照以下步骤进行操作： 1. 在父组件中，使用props属性来声明一个名为"list"的props，类型设置为Array，如下所示： ```javascript // 父组件 <template> <div> <ChildComponent :list="myArray"></ChildComponent> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { myArray: [1, 2, 3, 4, 5] }; } }; </script> ``` 2. 在子组件中，使用props属性接收父组件传递的数组，并在模板中使用它，如下所示： ```javascript // 子组件 <template> <ul> <li v-for="item in list" :key="item">{{ item }}</li> </ul> </template> <script> export default { props: { list: Array } }; </script> ``` 通过以上步骤，父组件就可以将数组传递给子组件，并在子组件中进行使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值