vue js 在组件中对数组使用splice() 遇到的坑。。。
遇到的问题:
用el-dialog写了个子组件
要实现在子组件中增删数据 点击确定后把值返回给父组件
父组件在每次点开子组件时都会把自己的值传进去。
//父组件传值
this.$refs.transfer.open(this.checkedColumn.concat(), this.columns.concat(), 'fbCampaign');
//子组件接受值
open(checkedColumn, columns, type) {
this.dialogVisible = true;
this.showColumns = checkedColumn;
this.otherColumns = columns;
this.type = type
}
逻辑并没有错误。。。但会遇到下面问题。。
涉及删除的操作,点保存没有出现问题,点击取消,父组件被删除的数据就会不见。
但是并没有传值给父组件。
原因:
数组是引用类型,splice()会删除所引用的地址里面的值。(吐血。。。)
以前在Java中遇到的问题,没想到js也会有这种删除问题。。
解决办法
在父组件传值的时候不传原地址的参数,通过concat()函数复制一个新的值,再传过去。
this.$refs.transfer.open(this.checkedColumn.concat(), this.columns.concat(), 'fbCampaign');