vue中props传值，⽗组件向⼦组件传递对象可以直接修改的问
题
1.vue中⽗⼦组件通信最常⽤的⽅式是props和$emit，通常来说，⽗级 prop 的更新会向下流动到⼦组件中，但是反过来则不⾏。这样会防⽌从⼦组件意外改变⽗级组件的状态，从⽽导致你的应⽤的数据流向难以理解。
但是当⽗组件的传值是数组或者对象时，⼦组件中不仅能够直接修改，还不会报错，在⼦组件中改变这个对象或数组本⾝将会影响到⽗组件的状态。
⽗组件代码：
<div >
<span >⽗组件区域：</span>
<div>传给⼦组件的值【toChildrenData】：{{toChildrenData}}</div>
<div>
<children :toChildrenData="toChildrenData"></children>
</div>
</div>
data () {
// 这⾥存放数据
return {
toChildrenData: {
name: '李四',
age: 22
}
js的基本数据类型}
}
⼦组件代码：
<template>
<div class="" >
<span >⼦组件区域：</span>
<div>⽗组件传过来的值【toChildrenData】：{{toChildrenData}}</div>
<input type="text" v-model="toChildrenData.name">
</div>
</template>
props: {
toChildrenData: {
type: Object,
default () {
return {}
}
}
},
事例效果：
可以看到，修改props传过来的值，是可以修改的，⽗组件⾥⾯也会跟着修改。
2.接下来分析下出现这种情况的原因：
（1）JavaScript 数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引⽤数据类型：对象(Object)、数组(Array)、函数(Function)。
（2）内存空间：
要理解 JavaScript 在运⾏过程中数据是如何存储的，就得先搞清楚其存储空间的种类
在 JavaScript 的执⾏过程中，主要有三种类型内存空间，分别是代码空间、栈空间和堆空间，其中的代码空间主要是存储可执⾏代码的，栈空间就是调⽤栈，是⽤来存储执⾏上下⽂的，堆空间是⽤来储存引⽤数据类型的。
这些概念不懂也没关系，就是这么个东西：js执⾏的时候，会把基本类型的数据保存在栈空间中，引⽤类型的数据保存在堆空间中
var name = '李四'
var age = 22
var chlidrenData = {
name: '李四',
age: 22
}
var newchlidrenData = chlidrenData
看⼀个简单的⽰意图：
从上图可以看到，对象类型是存放在堆空间的，在栈空间中只是保留了对象的引⽤地址，当 JavaScript 需要访问该数据的时候，是通过栈中的引⽤地址来访问的，所以，⽗组件传递给⼦组件的，实际上只是⼀个引⽤地址，当⼦组件修改这个对象时，是真的修改了在堆空间中保存的数值，当然⽗组件中的值也会发⽣变化，但是引⽤地址没有进⾏修改，所以并没有报错。
3.上⾯简要分析了⼀下vue组件通信中，⽗组件传⼀个对象给⼦组件，⼦组件可以直接修改这个数据，并且可以影响⽗组件的问题，⾥⾯涉及到堆空间、栈空间等JavaScript数据类型以及浏览器底层原理的东西，感兴趣的话可以阅读⼀下相关知识点。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。