Javascript 将对象从父对象发射到子对象

我正在使用VueJS。我有两个部分。第一个是第二个的父级。父对象有一个数组保存对象，而我们通过侦听子对象来获取对象

儿童

<template>
  <div>
    Create a new item <button @click="createItem">Create Item</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      item: {
        id: null
      },
      count: 0
    }
  },
  methods: {
    createItem () {
      this.item.id = this.count
      this.count = this.count + 1
      this.$emit('setItem', this.item)
    }
  }
}
</script>

---

您每次都在修改同一项

父项保存对子项的引用。只有一个元素，因此当您更新它时，会更新父数组中的所有元素，因为它们引用相同的对象

你有两种处理方法

在子对象或父对象中执行克隆

在儿童中，这应该起作用：

this.$emit('setItem', Object.assign({}, this.item))

---

这里有一个

您每次都在修改相同的项目

父项保存对子项的引用。只有一个元素，因此当您更新它时，会更新父数组中的所有元素，因为它们引用相同的对象

你有两种处理方法

在子对象或父对象中执行克隆

在儿童中，这应该起作用：

this.$emit('setItem', Object.assign({}, this.item))

---

这里有一个

您需要在每次从child发出时创建一个新项

像这样：

  methods: {
    createItem() {
      let newItem = {
        id: this.count + 1
      };
      this.count = this.count + 1;
      this.$emit("setItem", newItem);
    }

工作执行附件

---

每次从子对象发射时，都需要创建一个新项

像这样：

  methods: {
    createItem() {
      let newItem = {
        id: this.count + 1
      };
      this.count = this.count + 1;
      this.$emit("setItem", newItem);
    }

工作执行附件

---

是的，这是我的想法，每次我都试图用object.create（）等创建一个新对象，但没有成功。我想我现在能解决它了。因此，为了澄清：$emit实际上传递了引用，因此每个项的行为都会更新到最后一个设置值？我在哪里可以查看emit的工作原理？VueJS的APiI引用不知何故没有说明它是如何通过的。谢谢我不认为你会在emit文档中找到这种区别。这是传递参数的标准JS行为。谢谢，到时候我会研究的——我对JS的理解似乎有问题。否决票是怎么回事？所以我更喜欢这个答案。我个人认为这是一种更好的方法，因为我们重用代码，而且在语义上似乎更好。新对象的创建与它的结构是分离的（在另一种方法中不是这样的）是的，这是我的想法，每次我都试图用object.create（）等创建一个新对象，但它不起作用。我想我现在能解决它了。因此，为了澄清：$emit实际上传递了引用，因此每个项的行为都会更新到最后一个设置值？我在哪里可以查看emit的工作原理？VueJS的APiI引用不知何故没有说明它是如何通过的。谢谢我不认为你会在emit文档中找到这种区别。这是传递参数的标准JS行为。谢谢，到时候我会研究的——我对JS的理解似乎有问题。否决票是怎么回事？所以我更喜欢这个答案。我个人认为这是一种更好的方法，因为我们重用代码，而且在语义上似乎更好。新对象的创建与它的结构分离（在另一种方法中不是这样）

id:this.count+1

当

以计数器值

1

而不是

id

开始时，它将成为一个例子。只是一个注释。这与eslint不兼容。@handy，因为您在OP中提到这只是一个最小的复制品。我没有太注意语义。主要的一点是，您每次都发射相同的对象，但每次单击都需要发射一个新项目（对象）。答案中给出的示例中也说明了这一点。

id:this.count+1

当

以计数器值

1

开始，而不是与

id

相同时，它将起作用。只是一个注释。这与eslint不兼容。@handy，因为您在OP中提到这只是一个最小的复制品。我没有太注意语义。主要的一点是，您每次都发射相同的对象，但每次单击都需要发射一个新项目（对象）。答案中给出的例子也说明了这一点。