Vue解决父子组件传值,子组件改变值后父组件的值也改变的问题
vue开发过程中父组件通过props传值给子组件子组件在页面展示父组件的值在操作子组件值以后即使不点击确定按钮父组件中的值也发生了变化但是需求是操作子组件数据以后必须点击确定按钮以后才能修改父组件的值否则父组件和子组件的值都不可以变化。为了解决这一问题当父组件传值给子组件以后我通过JSON.parse(JSON.stringify(data ))将父组件的数据进行拷贝然后赋值给子组件中this.targetdData,子组件操作也是改变的this.targetData的值而不会改变父组件的值当点击确定按钮时通过$emit调用父组件中的函数将修改后的this.targetData值给了父组件修改父组件中的值当再次进入子组件的时候会重新把修改后的值拷贝给子组件进行展示就可以解决上述问题了。拷贝父组件的值this.targetData JSON.parse(JSON.stringify(this.targetDataPar))调用父组件方法this.$emit(changeData, this.targetData)父组件的方法changeData(val) { this.targetChanged val; },

相关新闻