关于vue props 传值,子组件修改props数据,父组件数据随之改变的问题
1.最近完成一个table列表,控制cloumn的显示隐藏的功能时,发现一个问题,记录一下首先问题是:通过父组件传递一个array数据下去给到子组件,数据格式大概是这个样子// 列信息columns: [{ key: 0, label: `付款时间`, visible: true },{ key: 1, label: `订单号`, visible: true },{ key: 2, label:
1.最近完成一个table列表,控制cloumn的显示隐藏的功能时,发现一个问题,记录一下
首先问题是:
通过父组件传递一个array数据下去给到子组件,数据格式大概是这个样子
// 列信息
columns: [
{ key: 0, label: `付款时间`, visible: true },
{ key: 1, label: `订单号`, visible: true },
{ key: 2, label: `消费商家`, visible: true },
...
],
子组件修改这个数据后,父组件列表的column列字段,相应显示隐藏
但是当时脑子一愣,没有发现子组件触发父组件方法去进行更改数据,所以就去研究了一下问题,然后就发现了一个之前没有关注到的问题!!!我真的会谢,太菜了
原来啊,在 JavaScript
中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop
来说,在子组件中改变这个对象或数组本身将会影响到父组件的状态
这种情况出现的原因是什么呢?
1.首先要知道Javascript
的数据类型
值类型(基本类型):字符串(String
) 数字(Number
) 布尔(Boolean
) 空(Null
) 未定义(Undefined
)Symbol
引用数据类型:对象(Object
) 数组(Array
) 函数(Function
)
2.内存空间
要理解Javascript
在运行过程中数据是如何存储的,就先搞清楚其存储空间的种类
在Javascript
执行过程中,主要有三种类型内存空间,分别是代码空间
、栈空间
、堆空间
,
其中:
代码空间的主要存储可执行代码,
栈空间就是调用栈,用来存储执行上下文,
堆空间是用来存储引用数据类型的
大概意思是:js执行时,会把基本类型保存在栈空间,引用数据类型保存在堆空间;
var name='李四';
var age=22;
var childrenDada={
name:'李四',
age:22
};
var newchildrenData=childrenData;
示意图:
从上图可以看到,对象类型数据
是存放在堆
空间中的,栈空间
只是保存了对象的引用地址
,当JavaScipt
需要访问该数据时,是通过栈
中的引用地址来访问
的,所以,父组件传递给子组件,实际是一个引用地址,当子组件修改这个对象时,是修改了堆
空间保存的数据,当然父组件也会改变,但是引用地址没有改变所以没有报错。
更多推荐
所有评论(0)