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

最新推荐文章于 2024-06-06 20:20:04 发布
最新推荐文章于 2024-06-06 20:20:04 发布
阅读量2.8k 收藏 7
点赞数 4
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Feb_ruary/article/details/124064780
版权

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

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

有什么区别？

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

如何解决？

将引用类型数据转为JSON模式
JSON.stringify()
在这里插入图片描述

胖玖
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
快速了解Vue父子组件传值以及父调子方法、子调父方法
10-15
这样，父组件的`id`值就会被传入子组件，子组件可以通过`this.sid`访问这个值。 2. **子传值给父组件** 子组件向父组件传递数据通常使用`$emit`事件发射器。在子组件中，我们创建一个方法触发`$emit`，比如： ```...
Vue 使用Props属性实现父子组件的动态传值详解
10-16
这样，当`parentMsg`的值改变时，子组件的`myMessage`也会相应更新。 ```html <child v-bind:my-message="parentMsg"></child> ``` `v-model`指令用于双向数据绑定，使得用户在输入框中修改`parentMsg`...
Vue中子组件改变父组件的数据解决方法
bob的博客
07-13 950
1.项目中遇到的问题 在项目中，碰到父组件向子组件传一个对象数据，子组件修改props里接受父组件的数据， 父组件的数据也 发生变化的问题，具体的代码如下 Parent.vue <template> <div> <child :infor="infor" :inforLabel="inforLabel"></child> </div> </template> <script> im
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
uniapp中父子组件的传值
最新发布
qq_36158551的博客
06-06 519
官方文档：https://uniapp.dcloud.io/vue-components?id=props在父组件中赋值时加上 .sync，在子组件中使用 this.$emit(‘update:title’,“uni-app”)改变值.sync 修饰符当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。.sync 它会被扩展为一个自动更新父组件属性的 v-on 监听器。-- 父组件 --><template><view></view><script>
[vue] props传值，子组件直接改变父组件的值
qq_34450741的博客
05-25 538
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。 2.实例应用，比如自定义弹窗 主页：（父组件） 注意 .sync <custom-dialog :visible.sync="dialogVisible"></custom-dialog> export default { name: '', data()..
子组件修改父组件数据方法
qq_18390335的博客
02-24 3142
prop是单向绑定，不能更改数据，只能由父组件传输过来 解决 1、可以在子组件中 声明一个中间变量（value），把父组件传过来的值(item)赋值给中间变量(value),当单选切换时修改的数据为value,就不会报错 2、使用.sync修饰符与$emit(update:xxx) 父组件 < synechange :statuType.sync=“statuType”></> 子组件 this.$emit(‘update:statuType’,text) ...
在vue中父组件更新，子组件也会更新吗
叮当的猫猫的博客
09-07 2551
在vue中，当子组件更新的时候，父组件不会自动更新，子组件的更新只会影响子组件以及其子组件的渲染，不会直接触发父组件的重新渲染，然而父组件可以通过向子组件传递属性(props)或监听子组件的事件(events)来获取子组件的更新信息，并根据需要决定是否触发自身的重新渲染。一般情况下，子组件的重排和重绘操作不会触发父组件的重排和重绘，子组件的变化通常会影响其自身及其子组件的渲染，不会直接影响父组件，然而当子组件引起的变化导致父组件的布局或样式发生改变时，浏览器会执行整体页面的重排和重绘。
Vue 父组件传值给子组件，对象数组类型，父组件直接调用子组件方法，会是上次的引用地址，vue 父子组件传值数据不能实时更新问题
tangdou369098655的博客
04-22 1820
vue 父子组件传值数据不能实时更新问题 解决方案一： 在子组件进行深度监听，然后监听里调用方法就可以了 父组件测试代码 <WranList ref="myEMChartRef2" :data-arr="dataArr" /> data() { return { dataArr: ['父组件初始的数据测试dataArr'], } }, mounted() { let ii = 0 setInterval(() => {
vue2.0 子组件改变props值,并向父组件传值的方法
08-27
Vue 2.0 子组件改变 props 值并向父组件传值的方法 在 Vue 2.0 中，子组件改变 props 值并向父组件传值是非常常见的需求。...通过这种方式，我们可以实现子组件改变 props 值并向父组件传值的需求。
vue父组件触发事件改变子组件的值的方法实例详解
10-17
Vue.js 是一款流行的前端...回到题目中的具体场景，当需要父组件通过事件改变子组件的值时，可以按照以下步骤操作： 1. **父组件向子组件传递初始值**：在父组件的模板中，将初始值绑定到子组件的props上。 ```html ...
vue的props实现子组件随父组件一起变化
09-01
当父组件的`parentMsg`改变时，子组件的`myMessage`也会相应地更新，显示的内容随之改变。子组件使用`props`接收的数据，并通过模板`<span>{{ myMessage }}</span>`来展示它。 为了使子组件能够监听到父组件`props`...
Vue组件使用（父组件监听子组件数据变化，子组件使用父组件的数据，并监听父组件的数据变化）
记录一名在读研究生的学习笔记、感悟、开发产物
03-06 5033
快速入门vue的组件传值和数据监听
子组件使用父组件传进来的值，子组件修改值感染父组件的值问题解决
小白的自我摸索之路
02-23 774
在开发中遇到了一个问题，将父组件的一个对象传给了子组件，在子组件操作该对象时，父组件的数据也受到了影响，这不是我所希望的例如下图，编辑未保存时，子组件编辑中修改值会将父组件中的值给修改掉。
Vue中子组件数据跟着父组件改变和父组件数据跟着子组件改变的方法
weixin_33979363的博客
02-23 2920
一，子组件数据跟着父组件改变 父组件的代码 <template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <!--<HelloWorld msg="Welcome to Your Vue.js App"/>--&gt...
vue父子组件传值的方法总结
热门推荐
qq_45337939的博客
08-17 2万+
一，父向子传值 1.通过props 使用技巧： 子组件内, props定义变量, 在子组件使用变量 父组件内, 使用子组件, 属性方式给props变量传值 注意事项： 父组件的数据发生了改变，子组件会自动跟着变 子组件不能直接修改父组件传递过来的props，会报错， props是只读的 子组件修改，不通知父级，会造成数据不一致 PS：父组件传给子组件的是一个对象，子组件修改对象的属性，是不会报错的，对象是引用类型, 互相更新 总结: ..
父子组件传值，子组件数据不更新
qq_48850466的博客
05-08 4465
项目场景： 提示：这里简述项目相关背景： 例如： 查看列表中的某一条，显示这条的详情信息–后台管理系统 问题描述 提示：这里描述项目中遇到的问题： 在父子组件传参时，父组件将值传到子组件后，子组件进行数据展示，在第一次传参时可以正常显示，第二次传值子组件的值就不更新了。 父组件 <div :parenData ="datas"></div> <script> data(){ return{ datas:"1" } }, methods:{ ch
vue2中父子组件通过props传递数据，父组件数据ajax异步更新，子组件数据不更新的问题解决
wangyinze123的博客
12-03 2720
解决方案1 在子组件中，watch监听props的动态值，设置deep的属性值为true（vue2官方文档中解释为：深度监听，每次属性值发生变化时，都会监听到）。在handler中执行子组件想处理数据的方法。 解决方案2 分析： 父子组件的生命周期顺序为：父beforeCreate - 父 created - 父beforeMounted-子beforeCreate - 子created - 子beforeMounte - 子mounted 父 mounted 。当父组件中mounted通过异步请求.
vue父组件向子组件(props)传递数据的方法
顺其自然~专栏
03-30 1万+
vue页面结构 在做项目的时候常常有这样的一个情况，这个页面的数据（比如：id号）要带到另一个页面去查询某个数据的详情等，传统的做法不是在url上加参数，cookie或者是现在H5的“sessionStorage”和“localStorage”上赋值，这是页面之间传递的方法。 随着Angularjs,React,Vue的流行组件式的开发方式成为另一种不错的解决方案。 最近就有一些小伙伴问我，vue组件之间是如何传递参数的？其实vue是有三种方式可以组件之间传递数据（props，组件通信，slot）..
子组件改变props值,并向父组件传值的方法
09-05
子组件改变props值并向父组件传值的方法有很多种，最常见的方法是使用回调函数和自定义事件。 1. 使用回调函数：在父组件中定义一个处理函数，通过props将该函数传递给子组件。子组件在需要改变props值的时候，调用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值