在vue中如何实现点击编辑的时候数据回显

在vue中实现点击编辑时数据回显可以使用v-model双向绑定数据。当点击编辑时，将数据传给表单组件，表单组件中使用v-model绑定数据，就可以实现数据回显。

具体实现步骤如下：

1. 点击编辑时，将要编辑的数据传给表单组件。

2. 在表单组件中使用v-model绑定数据，实现数据的双向绑定。

3. 在表单组件中设置默认值，当数据回显时，表单组件自动填充数据。

以下是一个简单的实现示例：

<!-- 点击编辑时，调用 edit 方法，将要编辑的数据传给表单组件 -->
<template>
  <div>
    <button @click="edit(item)">编辑</button>
    <form-component v-model="formData" />
  </div>
</template>

<script>
import FormComponent from './FormComponent.vue';

export default {
  components: {
    FormComponent,
  },
  data() {
    return {
      item: {
        id: 1,
        name: '张三',
        age: 20,
      },
      formData: {
        id: '',
        name: '',
        age: '',
      },
    };
  },
  methods: {
    edit(item) {
      // 将要编辑的数据传给表单组件
      this.formData = Object.assign({}, item);
    },
  },
};
</script>

在表单组件中，使用v-model绑定formData数据，同时设置表单组件的默认值，实现数据回显。

<template>
  <div>
    <input v-model="formData.name" />
    <input v-model="formData.age" />
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      default() {
        return {
          id: '',
          name: '',
          age: '',
        };
      },
    },
  },
  data() {
    return {
      formData: this.value,
    };
  },
};
</script>

以上是一个简单的实现示例，你可以根据实际需求进行修改。