vue.js 为什么我的子组件要更新父组件？ [复制]答案

【问题标题】：vue.js Why is my child component updating the parent? [duplicate]vue.js 为什么我的子组件要更新父组件？ [复制]
【发布时间】：2020-04-15 03:39:28
【问题描述】：

我有一个用作编辑部分的子组件。它复制created() 上的单个道具作为编辑的 v 模型，因为在用户单击保存按钮之前，我不希望任何编辑反映在父级上。当用户点击保存时，我将$emit编辑好的模型返回给父级进行更新。理论上。

实际上，每当我编辑子组件时，父模型似乎都是反应式的，尽管子 <input> 应该作用于传递的道具的副本。为什么会这样，我该如何预防？

<h2>{{ location.name }}</h2>
<edit-location v-if="editing" :location="location" />

EditLocation.vue：

<template>
  <input v-model="copyOfLocation.name">
  <button>Save</button>
</template>

<script>
export default {
  props: {
    location: {
      required: false,
      type: Object,
    },
  },
  data() {
    return {
      copyOfLocation: {},
    }
  },
  created() {
    this.copyOfLocation = this.location;
  },
}
</script>

【问题讨论】：

您正在将该对象分配给一个新属性，但它仍然是同一个对象。尽管有这个名字，但它实际上并不是一个副本。

标签： javascript vue.js vue-reactivity

【解决方案1】：

在将location 的值分配给copyOfLocation 时，它实际上分配了引用。这就是问题所在。试试

this.copyOfLocation = JSON.stringify(JSON.parse(this.location));

在复制created 挂钩中的值时。这不会复制引用。

this.copyOfLocation = _.cloneDeep(this.location); // cloning using Lodash library.

【讨论】：

成功了！不知道浅拷贝，但这是有道理的。