在 vue.js 的子组件中创建传递道具的本地副本? [英] Creating local copy of passed props in child component in vue.js?

问题描述

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

In vue.js what is the right way to edit prop without changing parent data? What I mean by that is whenever we pass any property from parent to child in vue.js then if we make any change to that property in child component then the change is also reflected in parent's component.

vue.js 中是否有任何方法可以在孩子中制作传递属性的本地副本?

Is there any way in vue.js to make a local copy of passed property in a child?

我用谷歌搜索了这个，但到处都写着我们可以通过这样做来实现这一目标.

I googled this but everywhere it is written that we can achieve this by doing this.

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

这里向用户传递了一个对象，我在本地用户中创建了它的副本，但它根本不起作用，本地用户未定义.

here the user is passed an object and I am creating a copy of it in local user but it doesn't work at all, the local user is undefined.

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

Have you encountered a scenario like this where you have to make changes to a parent property in child component without affecting the state of parent component i.e- making your own copy in child and then edit it?

对此的任何见解都会有所帮助.

Any insights on this will be helpful.

我在vue@2.3.3的某处也看到过，当我们想将一个prop从Father传递给子组件时，我们需要手动创建一个本地数据来保存该prop，这使得很多无用的工作.

I have also read somewhere that in In vue@2.3.3，when we want to pass a prop from Father to Child component, we need to manually create a local data to save the prop, that makes lots of useless works.

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

we can maually create the local data like this :

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

但这在我的情况下也不起作用.我将 vue cli 3.0.1 用于开发目的.

but this is not working in my case as well. I am using vue cli 3.0.1 for the developemnt purpose.

这是我的代码.

在我的应用程序中，我有一个列表视图.

In my application I have a list view.

当用户点击查看焦点视图按钮时，用户被重定向到下面提到的视图，即实际上是一个引导程序 - 模态视图.

When user clicks on the See Focused View button user is redirected to below mentioned view i.e is actaully a bootstrap - modal view.

在这里，用户可以编辑 Name 的值，但由于我在此处将 name 作为来自 aprent 组件的属性传递，因此在此处编辑它会导致它在父组件上更新，即也在列表视图中更新.

Here user can edit the value of Name, but as I am passing name here as a property from aprent component so editing it here causes it to update on parent component as well i.e in the list view as well.

推荐答案

在你的 fiddle，子组件正在使用 Object.assign() 创建data 的副本，它是一个对象数组.但是，这只会创建一个浅拷贝，因此数组元素仍会引用原始实例，导致您看到的行为.

In your fiddle, the child component is using Object.assign() to create a copy of data, which is an array of objects. However, this only creates a shallow copy, so the array elements would still refer to the original instances, leading to the behavior you're seeing.

深拷贝数组的几种解决方案:

A few solutions to deep copy the array:

• 使用JSON.parse(JSON.stringify(this.data))，对于 primitive 对象属性(String、Number、BigInt、Booleancode>、undefined 和 null):

• Use JSON.parse(JSON.stringify(this.data)), which works reasonably well for primitive object properties (String, Number, BigInt, Boolean, undefined, and null):

data() {
  return {
    local_data: JSON.parse(JSON.stringify(this.data))
  }
}

(演示 1)

将对象映射到新对象中，如果深度仅为 1，则效果很好(嵌套数组/对象仍将是浅复制):

Map the objects into new ones, which works well if the depth is only 1 (nested arrays/objects will still be shallow copied):

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

(演示 2)

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

Use a utility library, such as lodash's cloneDeep:

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

(演示 3)

这篇关于在 vue.js 的子组件中创建传递道具的本地副本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！