vue3+elementplus，子组件使用defineExpose暴露表单对象，父组件修改子组件暴露表单对象的值，子组件表单清除不了的问题。

子组件使用defineExpose：

const ruleForm = reactive<RuleForm>({
  name: '',
  unit: '',
  people: '',
  doc: '',
  desc: '',
})
defineExpose({ruleForm})

其中ruleForm是表单项的存值:

父组件使用暴露的表单对象:

标签内使用ref：

  <Dialog ref="aa" ></Dialog>

script标签setup语法糖内使用：

const aa=ref()
const edit=(row:Record<string, string>):void=>{
  isColl.centerDialogVisible=true
    aa.value.ruleForm.name='123';
  console.log(aa.value.name,123)
}

点击父组件编辑触发该事件，给表单中某一项赋值：

可以看到已经赋值成功了，但是调用elementplus框架中的resetFields()方法清空表单时，清除不了表单的值

原因是还没有获取到DOM元素就开始加载方法赋值：

我们需要加上，settimeout或者nexttick来更新dom元素完成以后赋值，这样就可以清除了。

const aa=ref()
const edit=(row:Record<string, string>):void=>{
  isColl.centerDialogVisible=true
  setTimeout(()=>{
    aa.value.ruleForm.name='123';

  })
}