在父组件中，重置子组件中的form表单resetFields()

以我所用到的弹框为例，因为内容较多，所以弹框的内容写成了一个组件，但是关闭弹窗的时候需要重置表单内容，当我在父组件重置子组件的form表单时，发现无法重置，报错：vue.esm.js?a026:628 [Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'resetFields')"
原因是，我们不能直接在父组件重置子组件的form。
解决办法（两种）：

1. 给子组件加一个ref属性，通过this.$refs先找到子组件再找到子组件中的form表单，然后重置表单：
   父组件：
   Father.vue

<div>
	<a-modal
      :visible="dialog"
      title="详情"
      @cancel="closeDialog"
      centered
      width="80%"
    >
		<Child ref="childCom"></Child>
	</a-modal>
</div>
<script>
	export default {
		data(){
			return{
				dialog:false,
			}
		},
		methods:{
			closeDialog(){// 弹窗关闭
				this.$refs.childCom.$refs.child_form.resetFields();// 找到子组件form的ref属性，执行重置方法
				this.dialog = false;
			}
		}
	}
</script>

子组件：
Child.vue

<el-form ref="child_form" :model="formData">
	<el-form-item label="姓名" prop="name">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
</el-form>
<script>
	export default {
		data(){
			return{
				formData:{name:""},
			}
		}
	}
</script>

2. 通过给组件绑定唯一的key值，实现表单的重置：
   父组件：
   Father.vue

<div>
	<a-modal
      :visible="dialog"
      title="详情"
      @cancel="closeDialog"
      centered
      width="80%"
    >
		<Child :key="Math.random()*100"></Child>
	</a-modal>
</div>

只需要在父组件中，给子组件绑定唯一的key值，这样子组件就不会复用，每次都会重新渲染，自然也就变相实现了表单的重置效果。至于使用哪种方法，看个人喜好和实际的项目需求。