分析：
随着使用vue越来越多，慢慢的也遇到了一些vue中的坑，前几天利用父组件给子组件传了一个queryInfo，按照以前的经验，我们需要使用 this.$emit()将值传回父组件，
但是，神奇的事情发生了，子组件修改后，父组件的queryInfo也同样发生了改变。
去官网以及各大网站查找后得知，个人发现了vue组件传值遵循这样一个规则
vue的组件传值对于引用数据类型来说，是一个 浅拷贝。
遇到问题的第一想法，是将父组件传值给子组件一个新的值
然后，在子组件props中接收到父组件的传值，并赋值给一个新的空值
props: ['queryInfo'],
created() {
this.subQueryInfo = this.queryInfo
},
methods: {
handleSubmit() {
this.$emit('fromSubmit', this.subQueryInfo)
}
}
方法一
此时queryInfo赋给新值的是原值的物理地址(浅拷贝),
因此，值的隔离失败，原因是父子组件此时共用的是同一个堆内存中的值
因此，我们将值进行stringfly转换，
原理就是，将父组件中的堆内存中的数据，使用JSON.stringify修改成字符串，
然后使用JSON.Parse再将字符串变成引用类型的值，放到堆内存里面去。
这是我们就解决了父子组件同时使用一个地址的问题
props: ['queryInfo'],
created() {
this.subQueryInfo = JSON.Parse(JSON.stringify(this.queryInfo
)),
methods: {
handleSubmit() {
this.$emit('fromSubmit', this.subQueryInfo)
}
}
优点:能深拷贝的对象有Number、String、Array等能够被json表示的数据结构
缺点:遇到不能被json格式正确表示的数据不能正确处理
方法二
最近封装组件的时候，突然想起了assign方法，利用assign进行父子组件的“深拷贝”，我们同样可实现方法一json的效果。
缺点： assign方法对于对象的拷贝只能拷贝对象数据中的基本数据类型，遇到对象中存在引用数据类型的，只能对引用类型进行浅拷贝
props: {
formList: {
type: Object,
default: () => Object.assign({}, { name: '', id: 0 })
}
},
data () {
return {
formListBack: Object.assign({}, this.formList)
}
},
methods: {
handleCancel () {
this.dialogVisible = false
},
handleConfirm () {
this.$emit('confirm', this.formListBack)
this.dialogVisible = false
this.formList = []
}
}
