问题描述

当父组件传递属性，在子组件中接收此属性并且直接对该属性进行了一些操作时会影响到父组件的数据

源代码

父组件：user-type-selector.vue

<UserTypeTree
  ref="userTypeTreeView"
  :ispermission="false"
  @onCheck="onTreeChange"
  :onlySelectChildren="onlySelectChildren"
  :attendanceTypeId="attendanceTypeId"
  :selection="listSelection"
  :selectedIds="selectIdTmps"
  :limitData="limitData"
></UserTypeTree>

子组件：user-type-check.vue

props： {
	// 已选数组节点
  selection: {
    type: Array,
    default: () => [],
  },
}

说明：是自定义子组件

原因分析

父组件中 listSelection 参数和子组件中 selection 参数是引用同一个对象（内存地址相同），所以导致在改变子组件中的参数值的时候，也会影响到父组件。

解决方案

在子组件中重新定义一个属性，用来接收这个参数的值

props： {
	// 已选数组节点
  selection: {
    type: Array,
    default: () => [],
  },
}

mounted(){
  this.selectedCopy = this.selection;
}