今天在写一个 SpringBoot+Vue 的项目时，想使用 props 来完成一个用户的详情展示，中途出现了问题:
描述:
- 在父组件中通过 props 给自组件传递一个数据后(一个对象), 在子组件内将其赋值给 data 中的 form 属性。然后通过页面操作来修改了data 中 form 属性里的值。结果发现父组件中所传递的值也发生了修改!!!
通过查看文档里的 props ，发现:
文档地址 : v2.cn.vuejs.org/v2/guide/co…
产生这个问题的原因:
如图所示:
在js中数据的存储是以 key:value(键值对) 的形式来完成的。
- 数据本身是基本数据类型 : 那么在栈上的value中存放的就是具体的数据。
- 数据本身是引用数据类型 : 那么在value中存放的只是堆中真正存放数据的那块区域的地址
而在 Vue 中，props 的传递只是将栈上的 key:value 给拷贝了一份(浅拷贝)，所以对于引用数据类型来说这时拷贝后的数据和原数据的 value 都是指向同一块内存空间，故修改其中一个的值就会影响到另一个。
解决办法:
JSON.parse(JSON.stringify(父组件传递给子组件的数据))
注意:
通过全局事件总线（也就是自定义事件）来传递数据同样也会出现这个问题。
如:
// 触发自定义事件(通过JSON来解决父组件给自组件传值时的浅拷贝问题)
this.$bus.$emit('事件名',JSON.parse(JSON.stringify(所传递的数据)))
