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');
posted @ 2019-01-09 10:59  汝嫣丶  阅读(2866)  评论(0编辑  收藏  举报