VueJS在不改变父数据​​的情况下编辑道具的正确方法 [英] VueJS right way to edit prop without changing parent data

问题描述

在我的父vue组件中，我有一个用户对象。

In my parent vue component I have a user object.

如果我将该用户对象传递给子组件作为道具：

If I pass that user object to a child component as a prop:

<child :user="user"></child>

在我的子组件中我更新 user.name ，它也将在父母中更新。

and in my child component I update user.name, it will get updated in the parent as well.

我想编辑子组件中的用户对象，而不会在父组件中的用户对象中反映更改。

I want to edit the user object in child component without the changes being reflected in the user object that is in parent component.

有没有比用以下方法克隆对象更好的方法： JSON.parse（JSON.stringify（obj））？

Is there a better way to achieve this than cloning the object with: JSON.parse(JSON.stringify(obj))?

推荐答案

您不必使用 JSON 对象。

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

在孩子的内部使用 localUser （或任何你想要的名字）。

Use localUser (or whatever you want to call it) inside your child.

编辑

我修改了为这个问题的另一个答案创建的小提琴，以演示上述概念和@ user3743266问

I had modified a fiddle created for another answer to this question to demonstrate the above concept and @user3743266 asked

我自己就是要抓住这个，我发现这个非常有用的
。你的例子效果很好。在孩子中，你已经在数据中创建了一个
元素，该元素获取了prop的副本，并且子项与副本一起工作
。有趣且有用，但......如果其他东西修改了
父级，本地副本会更新时，我不清楚
。我修改了你的小提琴，删除了v-ifs所以一切都是
可见，并复制了编辑组件。如果你在一个
组件中修改名称，另一个是孤立的并且没有变化？

I'm coming to grips with this myself, and I'm finding this very useful. Your example works well. In the child, you've created an element in data that takes a copy of the prop, and the child works with the copy. Interesting and useful, but... it's not clear to me when the local copy gets updated if something else modifies the parent. I modified your fiddle, removing the v-ifs so everything is visible, and duplicating the edit component. If you modify name in one component, the other is orphaned and gets no changes?

当前组件看起来像这样：

The current component looks like this:

Vue.component('edit-user', {
  template: `
  <div>
    <input type="text" v-model="localUser.name">
    <button @click="$emit('save', localUser)">Save</button>
    <button @click="$emit('cancel')">Cancel</button>
  </div>
  `,
  props: ['user'],
  data() {
    return {
      localUser: Object.assign({}, this.user)
    }
  }
})

因为我做出了设计决定使用本地副本用户，@ user3743266是正确的，组件不会自动更新。 属性 用户已更新，但 localUser 未更新。在这种情况下， if 你想在属性改变时自动更新本地数据，你需要一个观察者。

Because I made the design decision to use a local copy of the user, @user3743266 is correct, the component is not automatically updated. The property user is updated, but localUser is not. In this case, if you wanted to automatically update local data whenever the property changed, you would need a watcher.

Vue.component('edit-user', {
  template: `
  <div>
    <input type="text" v-model="localUser.name">
    <button @click="$emit('save', localUser)">Save</button>
    <button @click="$emit('cancel')">Cancel</button>
  </div>
  `,
  props: ['user'],
  data() {
    return {
      localUser: Object.assign({}, this.user)
    }
  },
  watch:{
    user(newUser){
        this.localUser = Object.assign({}, newUser)
    }
  }
})

这是更新的小提琴。

这使您可以完全控制何时/是否更新或发出本地数据。例如，您可能希望在更新本地状态之前检查条件。

This allows you full control over when/if the local data is updated or emitted. For example, you might want to check a condition before updating the local state.

  watch:{
    user(newUser){
      if (condition)
        this.localUser = Object.assign({}, newUser)
    }
  }

正如我在其他地方所说的那样，有时你可能想要利用对象属性是可变的，但也有一些时候你可能想要更多的控制。

As I said elsewhere, there are times when you might want to take advantage of objects properties being mutable, but there are also times like this where you might want more control.

这篇关于VueJS在不改变父数据​​的情况下编辑道具的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！