Question

我想在vueJs中将数组从一个组件传递到另一个组件，

<add-new-admin-modal
 :permissions = "permissions"
</add-new-admin-modal>

在我实际上是模态的其他组件中，我正在收到道具，

props: {
  permissions: {
    type: Array,
    default: () => []
  }
}

在这里，当我尝试更改权限数组时，它反映了父数据，如文档中所述。

所以我尝试了传播算子

data () {
 return {
  statePermissions: [...this.permissions]
 }
}

当我尝试上述方法时，statePermissions数组仍为空

我什至尝试使用Object.assign

data () {
 return {
  statePermissions: Object.assign([], this.permissions)
 }
}

仍然无法正常工作。

在我的模式中，我以

的身份访问它

<div v-for = "permission in statePermissions" :key = "permission.id">
 ...someHtml here.
</div>

主要思想是，我有一个可通过api获取数据的组件，然后有一个模态，可获取此数据并相应地对其进行更新并将其提交给api。当关闭模式时，父组件应该需要具有未编辑的数据，因此，如果重新打开模式，它应该获取未编辑的数据。

在使用Modal的过程中，我的父组件保持相同的状态（既未安装也未更改），因此它们毫无意义再次向父组件请求默认数据。

Answer 1

您的问题可能是prop的默认值是一个空数组，并且在父项正确填充该属性之前，您正在将其分配给局部变量（甚至可能是生命周期问题）。

尝试将对局部变量的赋值移动到mounted()钩子上，如果不想让它成为被动watch属性，则更好：

watch: {
  permissions(newValue) {
    this.statePermissions = newValue
  }
}

您也不需要...spread数组即可将其分配给数组。

Answer 2

由于permissions是对象的数组，因此，当您对其进行复制时，所得数组是浅表副本，这意味着它将包含对对象的相同引用。这就是为什么修改新数组的值也会更新旧数组的值的原因。您需要在permissions内部创建对象的副本。

如果permissions仅包含基元，则可以执行以下操作：

this.statePermissions = JSON.parse(JSON.stringify(this.permissions));

如果permissions是某种类型（即new Permission()），则可以对其进行映射（我认为这更干净）：

this.statePermissions = this.permissions.map(x => new Permission(x.propA, x.propB, etc.));

这样，statePermissions中的每个克隆对象将具有与其在permissions中复制的对象相同的属性，但是它是独立的，因此修改不会影响从其创建的父对象。 / p>