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

这样都会导致新的变量指向同一个内存空间;
对象的改变也是这个道理


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM