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');

巴特西

vue js 在组件中对数组使用splice() 遇到的坑。。。

最新文章

热门文章