代码之家 › 专栏 › 技术社区 › Divyanshu Rawat

在vue.js的子组件中创建传递的道具的本地副本?

vue-cli deep-copy vue-component vuejs2 vue.js

2

Divyanshu Rawat · 技术社区 · 8 年前

在vue.js中,编辑道具而不更改父数据的正确方法是什么? 我的意思是,每当我们在vue.js中将任何属性从父级传递给子级时,如果我们在子组件中对该属性进行任何更改,那么更改也会反映在父级组件中。

我在google上搜索了一下,但是到处都写着我们可以通过这样做来实现这一点。

 props:["user"],
  data(){
    return {
      localUser: Object.assign({}, this.user)
    }
  }

在这里,用户被传递了一个对象,我正在本地用户中创建它的副本,但是它根本不工作,本地用户是未定义的。

您是否遇到过这样一种情况:您必须在不影响父组件状态的情况下更改子组件中的父属性,即在子组件中创建自己的副本,然后对其进行编辑?

任何关于这方面的见解都会有所帮助。

我也读过这本书vue@2.3.3ï¼当我们要将道具从父组件传递到子组件时,我们需要手动创建一个本地数据来保存道具,这会产生很多无用的工作。

我们可以这样创建本地数据:

props: ['initialCounter'],
data: function () {
    return { counter: this.initialCounter }
}

但这在我的情况下不起作用。

这是我的密码。

在我的应用程序中,我有一个列表视图。

当用户单击 查看聚焦视图 按钮用户被重定向到下面提到的视图,即实际上是一个引导模式视图。

在这里,用户可以编辑Name的值,但是由于我将Name作为一个属性从一个代理组件传递到这里,所以在这里编辑它会导致它在父组件上更新,也就是在列表视图中。

1 回复 | 直到 8 年前

1

23

tony19 thanksd 5 年前

在你的 fiddle ,子组件正在使用 Object.assign() 创建的副本 data ,这是一个对象数组。然而,这只会造成 shallow copy ,因此数组元素仍将引用原始实例,从而导致您看到的行为。

深度复制阵列的几种解决方案:

将对象映射到新对象:

data() {
  return {
    local_data: this.data.map(x => ({...x}))
  }
}

使用实用程序库,例如 lodash 的 cloneDeep :

data() {
  return {
    local_data: _.cloneDeep(this.data)
  }
}