父子组件传值时，子组件改变值，父组件也随之改变

最新推荐文章于 2024-05-22 16:09:12 发布
最新推荐文章于 2024-05-22 16:09:12 发布
阅读量2k 收藏 6
点赞数
文章标签： js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maying_2020/article/details/115729145
版权
本文探讨了Vue框架中的单向数据流原则，指出在处理基本数据类型和引用类型时的区别。当使用props传递引用类型数据时，由于浅拷贝，子组件可以直接修改父组件的状态。为避免这种情况，可以将引用类型转换为JSON，确保单向数据流的正确性。文章深入解析了这一现象，并提出了解决方案。
摘要由CSDN通过智能技术生成

理论上vue是单向数据流,只能父组件传值给子组件，子组件要想改变父组件的值，必须通过emit一个事件，在父组件中修改。

但是有时候却出现，子组件可以直接改变父组件里面的值，这是怎么一回事？难道vue不是单向数据流了？
其实不是，vue就是单向数据流。
有时候只能子组件中的props的值不能改变父组件中的值，因为这时候的值是基本数据类型；
有时候又能直接改变父组件的值，实际上此时，这个值是引用类型的值。

有什么区别？

基本数据类型存储在栈中
引用数据类型存储在堆中
props相当于把数据浅拷贝下来，仅仅是把引用类型数据的存储地址拷贝在栈中，而它本身的内容是在堆中。
基本类型本身就在栈中，全部拷贝下来了。
当在子组件中改变基本数据类型时，父组件中的值不会改变，但是当改变引用类型数据时，因为父组件和子组件中的props保存的引用类型数据的地址时一样的，对应地址的值也一起改变。

如何解决？

将引用类型数据转为JSON模式
JSON.stringify()

maying_2020
关注
vue父组件给子组件传递的参数发生改变时,子组件不能及时更新的问题
weixin_43905289的博客
03-28 1万+
写代码时遇到的一个坑,希望可以帮助遇到同样问题的人 问题: 当我们在父组件给子组件绑定数据后,再修改传递给子组件的相关属性时,子组件并不能及时更新数据.子组件的props其实接收到了更新事件,但是直接在data中 table: this.table 没有更新. 解决方法: 在子组件中的watch监听中给data中的数据赋值 原理: 在子组件中watch是用来监听props的监听器,只需要给要监听的props属性在watch声明同名的方法,即可监听对应data属性的变化. watch 还有两个选项:deep和
vue、uni-app组件封装引入及父子组件传值（保姆级教程）
兄弟连之一个前端小白的成长
05-20 765
uni-app之页面组件封装+父子组件传值保姆级教程-(适合新手小白）
Vue解决父子组件传值，子组件改变值后父组件的值也改变的问题
weixin_43254676的博客
06-10 1万+
Vue解决父子组件传值，子组件改变值后父组件的值也改变的问题
解决子组件改变传递的值，父组件的值也会跟着改变的情况
zz18256889177的博客
05-22 4593
今天在没事重新翻阅 vue的开发文档的时候，发现一个很好玩的东西，很开心，也感觉有必要记录一下，也给大家分享一下，避免大家踩坑 文档说： 注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。 这句话咋一看好像是说vue的组件传值不在准守但想数据流这个规则，其实不是这样的，上面讲了，是引用数据类型，不在遵守这个规则。 为什么？ 这就要说说vue的组件传值对于引用数据类型来说，是一个 浅拷贝。
[vue] 解决父子组件传值 prop，子组件改变值后父组件的值也会随之改变
qq_14993591的博客
01-05 2328
当在子组件中改变基本数据类型时，父组件中的值不会改变，但是当改变引用类型数据时，因为父组件和子组件中的 props 保存的引用类型数据的地址时一样的，对应地址的值也一起改变。props 的传递是将数据浅拷贝下来，拷贝的引用数据类型其实指向对一个对象，拷贝在栈中，内容还是指向同一个堆地址，而基本数据类型本身就是在栈中，就会全部拷贝下来。时，子组件是可以改变父组件的值的。时，子组件不能改变父组件的值。基本数据类型存储在栈中。引用数据类型存储在堆中。props 的类型为。props 的类型为。
Vue 子组件修改父组件传递过来的值
weixin_45442464的博客
08-26 1万+
1. 常用的方法 一般通过子组件修改父组件传递过来的值,我们就会采用props和$emit进行单向数据绑定 父组件: <template> <div> <test :value="value" @change="change"></test> </div> </template> <script> import test from '@/components/test.vue' export d
Vue父子组件传值的一些坑
01-18
在用 Vue 的父子组件传值时遇到一个冷门的问题，子组件改变值后父组件的值也随之改变了，特此记录下原因和解决方式。 再系统梳理下 JavaScript 的深拷贝与浅拷贝相关知识点。 1. 问题描述 父组件传值给子组件，子...
小程序父子组件间传值（微信/支付宝/钉钉）
CATDOG_的博客
07-20 1841
小程序父子组件间传值（微信/支付宝/钉钉）
vue父子组件传值props
09-10
这样，当父组件的数据发生变化时，子组件也会随之更新。父子组件之间的传值通过props实现了双向数据流。这对于构建复杂的组件结构非常有帮助，使得数据的传递变得简单和可控。 ### 回答3： Vue中，可以通过props...
浅谈vue父子组件怎么传值
12-29
背景：最近在做vue的项目，因为页面的逻辑比较...因为vue不提倡在子组件中修改父组件的值，所以如果要这样操作的话就要麻烦一步，而我正好需要这样的操作，于是就查阅了资料 上父组件的代码，引用了exp-group子组件 ...
父子组件传值——父组件传值发生变化，子组件的数据没有发生变化
qq_37037988的博客
07-21 2885
Vue-父子组件传值
vue父组件数据更新，子组件没有变化。
热门推荐
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
09-23 2万+
vue父组件数据更新，子组件没有变化。 在父子组件传参时，父组件将值传到子组件后，子组件进行数据展示，在第一次传参时可以正常显示，过一段时间后重新赋值，则发现子组件里面数据没有更新，这个时候需要在子组件中加入watch 进行数据监听 示例 父组件 <div :parenData ="datas"></div> <script> data(){...
父组件接收子组件传过来的值，如果值是引用数据类型，父组件修改这个值会有变和不变两种情况
qq_59297167的博客
04-26 147
emit() 接受时是浅拷贝的引用数据类型，那么父组件直接修改这个值子组件也会跟着改变。利用this.$refs.child.值=" " 来进行修改子组件。2 、如果接受是采用了深拷贝，那么直接改变就不生效，须在父组件引用的子组件加上 $ref="child"
当父组件的对象值发生改变的时候子组件没有重新进行渲染。
MollyL的博客
10-10 5476
方法一：当对象新增属性时通过this.$set()方法能够实时渲染子组件的数据。 1、子组件用props的方法进行接收父组件的传给子组件的值。 props:{ formData:{ type: Object, default: null } } 2、在created中用this.$set(this.formData)就能实时更新值 created() { this.$set(this.fromData); }, 方法二：用watch 去
子组件未传递数据，父组件数据却改变。 “引用数据类型的‘浅拷贝’”
YSJ_chengnan的博客
02-24 321
子组件未传递数据，父组件数据却改变一、环境二、 结论 前言：今天在开发过程中，遇见一个烧脑的问题。感觉有必要记录一下，也给大家分享一下，避免大家踩坑。 一、环境 父组件：展示自己的兴趣标签，可通过子组件修改兴趣标签 子组件：选择【修改】自己的兴趣标签，将选择的数组传递给父组件 1.1 父组件代码 <select-interest v-show="selectInterestVisible" :skillList="skillList" :ownedSkill
当父组件的对象值发生改变的时候，子组件没有重新进行渲染？
Kerryliuyue的博客
09-04 2469
当在页面使用子组件时，页面进行渲染时，子组件已经进行渲染，所以会出现当父组件的值进行修改时，子组件没有重新渲染。一般来说，父子组件传值，当父组件值变化时子组件的值也会实时变化，子组件使用prop接收数据。
vue3父子组件通信，子组件修改父组件传过来的值
最新发布
weixin_48420104的博客
05-22 3699
父组件调用子组件Child1时通过 :msg2= "msg2"把msg2的数据传给子组件，并且通过自定义事件接收子组件的emit通知，用来修改父组件的msg2数据。子组件通过defineProps接收一下msg2 ，可以直接展示在模板上，子组件自定义emit事件去通知父组件修改msg2的数据，数值是子组件传过去的。子组件也先通过defineProps接收一下num，并展示。父组件调用子组件时，通过v-model:num="num" 的方式传值给子组件。三、父组件调用子组件时，通过v-model传多个值。
Vue的踩坑集☞ —— 父组件传值给子组件，子组件改变值后再传回去
weixin_30500473的博客
06-21 268
一个基本的父传子demo parent.vue <template> <div> <Child text="hi"></Child> </div> </template> <script> import Child from './child.vue' export d...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值