vue采用相同子组件表单，表单清空的解决

        在项目中做添加和编辑功能时候，点击父级页面的添加和编辑按钮，用的是同一个表单弹窗，数据添加和编辑用同一个弹窗，没有在弹窗使用v-if，性能不是很好，弹窗中有表单，在编辑弹窗表单数据之后关闭弹窗，然后点击添加的时候，弹窗里的表单数据还是之前编辑的数据，无法做到清空表单数据。以下为解决办法

        首先是不管是添加还是编辑，都需要将子组件需要的对象属性一一写出来，传给子组件，

        然后是主要用到了el-form表单有一个清空重置表单数据的事件方法resetField()，在子组件表单弹窗打开的时候清空一下，在关闭子组件表单弹窗的时候还需要调用resetField()去重置表单数据。这样编辑数据之后再次打开添加数据，页面不会有之前的数据存在，也不会出现验证信息在页面上。

父组件

<!-- form是子组件的form表单数据，meg是子组件弹窗的标题（添加或者编辑） -->
<!-- <add-edit :msg.sync="msg" v-if='msg' :form='form'></add-edit> -->
<!-- 没有使用v-if 是因为频繁点击编辑和新增的话，性能方面不是很好-->
<template>
  <el-button @click="addClick">添加</el-button>
  <el-button @click="editClick(scope.row)">编辑</el-button>
  <!-- 子组件弹窗 -->
  <add-edit :msg.sync="msg" :form="formData"></add-edit>
</template>
<script>
export default {
  data() {
    return {
      formData: {},
    };
  },

  methods: {
    addClick() {
      //需要将子组件需要的对象属性传过去，这一步必须得有，这样在子组件才可以清空表单
      this.formData = {
        name: '',
        email: '',
        phone: '',
      };
      this.msg = '添加';
    },

    editClick(row) {
      this.formData = row;
      this.msg = '编辑';
    },
  },
};
</script>

2. 点击父级页面的编辑按钮，将人员信息传递给AddEdit.vue

<template>
  <el-dialog
    :visible.sync="isShow"
    width="500px"
    class="edit-contact"
    :before-close="closeDialog"
  >
    <span slot="title">{{ msg }}联系人</span>
    <el-form
      :model="form"
      ref="ruleForm"
      label-width="100px"
      :rules="rules"
      size="small"
    >
      <el-form-item
        :label="it.label"
        :prop="it.prop"
        v-for="it in formLabel"
        :key="it.prop"
      >
        <el-input
          v-model="form[it.prop]"
          :placeholder="`请输入${it.label}`"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="base-btn-action">
      <el-button size="small" type="primary" @click="saveContact">{{
        form.id ? '编辑' : '添加'
      }}</el-button>
      <el-button size="small" @click="closeDialog">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    msg: {
      //“添加”或者“编辑”
      type: String,
      default: '',
    },
    form: {
      //接收父组件传过来得对象数据
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      formLabel: [
        { label: '姓名', prop: 'name' },
        { label: '邮箱', prop: 'email' },
        { label: '联系方式', prop: 'phone' },
      ],
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'change' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur'] },
        ],
        phone: [{ required: true, message: '请输入手机号', trigger: 'change' }],
      },
    };
  },
  computed: {
    //通过props的数据msg的值是否为空来判断弹框显示与否
    isShow() {
      return this.msg === '' ? false : true;
    },
  },
  watch: {
    //监听子组件弹窗是否打开
    msg(n) {
      //子组件打开得情况
      if (n !== '') {
        if (!this.$refs.ruleForm) {
          //初次打开子组件弹窗的时候，form表单dom元素还没加载成功，需要异步获取
          this.$nextTick(() => {
            this.$refs.ruleForm.resetFields(); // 去除验证
          });
        } else {
          //再次打开子组件弹窗，子组件弹窗的form表单dom元素已经加载好了，不需要异步获取
          this.$refs.ruleForm.resetFields(); // 去除验证
        }
      }
    },
  },
  methods: {
    closeDialog() {
      this.$emit('update:msg', '');
      setTimeout(() => {
        //关闭弹窗的时候表单也重置为初始值并移除校验结果
        this.$refs.ruleForm.resetFields();
      }, 200);
    },
  },
};
</script>

这样子就解决了使用单个子组件进行新增和修改的办法了