javascript - vue.js 为什么我的子组件要更新父组件？

Question

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

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

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

编辑位置.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>

Answer 1

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

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

同时复制created钩子中的值。这不会复制参考。

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