vue2和vue3 配合element-ui 表单新增和修改共用组件方案

vue写后台管理系统表单新增和编辑经常会用同一个组件，这样操作会使每次打开弹窗，表单数据都是最原始的，代码很清晰，也不会出错

vue2 + element-ui

this.$options.data()  //可以获取到组件mounted时data里面的原始数据

<template>
<div>
  <el-dialog @close="dialogClosed">
    <el-form :model="form" ref="formRef">
      <el-form-item label="名字"> 
        <el-input v-model="form.name"></el-input> 
      </el-form-item> 
      <el-form-item label="年龄"> 
        <el-input v-model="form.age"></el-input> 
      </el-form-item> 
    </el-form>
  </el-dialog>
</div>
</template>
<script>
export default {
  data() { 
    return { 
      form:{
        name:"",
        age:""
      }
    } 
  },
  methods: {
    //表单弹窗关闭时候回调
    dialogClosed() {
      this.form = this.$options.data().form   //将最原始数据直接赋值给form对象
      this.$refs.formRef.clearValidate()   //清空校验
    }
  }
} 
</script>

vue3 + element-plus

<el-dialog @closed="dialogClosed">
  <el-form :model="form" ref="formRef">
      <el-form-item label="名字"> 
        <el-input v-model="form.name"></el-input> 
      </el-form-item> 
      <el-form-item label="年龄"> 
        <el-input v-model="form.age"></el-input> 
      </el-form-item> 
    </el-form>
</el-dialog>

<script setup>
  import { ref, reactive } from 'vue'
  const formRef = ref()
  
  //表单数据
  const formOrg = () => {
    return {
      name:"",
      age:""
    }
  }
  let form = reactive(formOrg())
  
  //表单弹窗关闭时候回调
  const dialogClosed = () => {
    Object.assign(form, formOrg())
    formRef.value && formRef.value.clearValidate()   //清空校验
  }
</script>