vue从列表中选择一条数据，如何做到每次点击修改弹框都显示数据的本值，而不是上次编辑后没保存的值

Question

父组件将列表中选中的这个object给弹窗组件传进去；

弹窗组件内代码：

Answer 1

我的思路是，你子组件双向绑定的那个值，不要直接用父组件传给他的，弹窗打开的时候，做一个动作，就是声明一个新的值，然后把父组件的值传给他（需要深复制），然后你子组件就直接绑定新声明的那个值；然后弹窗关闭的时候，如果是保存关闭，那就把你新声明的那个值传给父组件，让父组件去更新这个值，就是vue的自定义事件，$emit和$on；如果是未保存关闭，那么久不用做任何其他操作，直接关闭子组件就好了。

Answer 2

点开弹窗的时候把父组件的值给给弹窗就好了，父组件的值始终是获取服务器的值，不提交到服务器就不会改变

Answer 3

点开之后，复制一份数据，保存就提交回去，不然就丢掉。

// modal.vue
<template lang="pug">
input(v-model="localValue.someField")
</template>

<script>
export default {
  props: {
    value: null,
  },

  data() {
    return {
      localValue: null,
    };  
  },

  methods: {
    onSubmit() {
      this.value = this.localValue;
    },
  },

  beforeMount() {
    this.localValue = cloneDeep(this.value);
  },
}
</script>