vue 父组件、子组件对象改变_vue中子组件改变数组或对象的值，使父组件不受影响...

在vue中，父组件传值给子组件通过，v-bind，众所周知，子组件要想改变父组件传的值，都要向父组件发送一下信号，即$emit()，但是我最近发现，有时候，子组件不emit，都可以改变父组件传来的变量的值，哪怕把父组件传的变量的值再赋值给另一个变量，改变该变量，也会改变父组件的对应变量的值，这是为啥呢，根据

vue 父子组件传值 子组件修改父组件值的解决办法中提到的，我才发现，原来

在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

而我现在的需求是，在子组件改变变量的值，在父组件不会发生响应的改变，我是这样做的

子组件

this.copyScreenList = new Array()//这样赋值，在子组件改变值的时候，父组件不会响应改变

this.screenList.forEach(item => {//screenList为父组件传的变量

let tempObj = {

name: item.name,

value: item.value,

choose: item.choose

}

this.copyScreenList.push(tempObj)

})

这样就等于，新开辟了一块内存空间，用于放子组件的数组变量，但是不能这样做哈

this.copyScreenList = new Array()//这样赋值，在子组件改变值的时候，父组件不会响应改变

this.screenList.forEach(item => { //screenList为父组件传的变量

this.copyScreenList.push(item)

})

更不能这样做

this.copyScreenList = new Array()//这样赋值，在子组件改变值的时候，父组件不会响应改变

this.copyScreenList = this.screenList

这样都会导致新的变量指向同一个内存空间；

对象的改变也是这个道理