场景：一个组件两个弹窗，即新增、编辑两个弹窗，两个表单
需求：点击新增按钮，出现新增弹窗，填写表单，提交成功，弹窗消失。再次点击新增按钮，弹窗出现，弹窗里的值清空（重置）
问题：再次点击新增按钮，出现上一次填写的信息
如图：

1、第一种

// 点击新增按钮
addDict () {
  console.log(this.addObj)
  this.addObj = {
    width: 620,
    title: '新增字典',
    visible: true,
    confirmLoading: false,
    dictName: '',
    dictType: '',
    dictDataItems: [
      {
        "dictCode": "",
        "dictLabel": ""
      }
    ]
  }
  console.log(this.addObj)
},

下面是打印的信息

从打印的信息看出来，其实数据已经是清空了的
2、尝试使用this.$nextTick()

// 点击新增按钮
addDict () {
  this.$nextTick(() => {
    this.addObj = {
      width: 620,
      title: '新增字典',
      visible: true,
      confirmLoading: false,
      dictName: '',
      dictType: '',
      dictDataItems: [
        {
          "dictCode": "",
          "dictLabel": ""
        }
      ]
    }
  })
},

效果跟第一种是一样的

3、使用ref

<a-form
  :form="form"
  :label-col="{ span: 4 }"
  :wrapper-col="{ span: 20 }"
  ref="addForm"
>

// 点击新增按钮
addDict () {
  this.addObj = {
    width: 620,
    title: '新增字典',
    visible: true,
    confirmLoading: false,
    dictName: '',
    dictType: '',
    dictDataItems: [
      {
        "dictCode": "",
        "dictLabel": ""
      }
    ]
  }
  console.log(this.$refs.addForm)
},

效果是一样的，而且打印出来的东西对我没用

4、使用resetFields()，文档地址https://www.antdv.com/components/form-cn/

// 点击新增按钮
addDict () {
  this.addObj = {
    width: 620,
    title: '新增字典',
    visible: true,
    confirmLoading: false,
    dictDataItems: [
      {
        "dictCode": "",
        "dictLabel": ""
      }
    ]
  }
  this.form.resetFields()
},

总结：其实就是自己蠢。本身是会用这个方法的，但是因为觉得有两个form表单，不知道怎么区别并且操作

form: this.$form.createForm(this, { name: 'add' }),

习惯性这样去定义，以为不同组件只是修改了属性name的值！！！

你未来的样子藏在你现在的努力里！