vue 表单验证按钮事件交由父组件触发的方法
Vue表单验证与按钮事件：父组件触发子组件表单验证的方法
在Vue开发中，我们经常遇到需要在子组件中进行表单验证，但在父组件上处理按钮点击事件的情况。这样的设计使得我们能够在不干扰子组件内部逻辑的情况下，管理整个应用的流程。下面，我们就通过具体的代码示例来讲解如何实现这一功能。
子组件：
HTML部分：
```html
```
JavaScript部分：
```javascript
export default {
data() {
return {
formCustom: {
age: ''
},
ruleCustom: {
age: [
{ required: true, message: '年龄不能为空', trigger: 'blur' }
]
}
};
},
methods: {
handleSubmit() {
this.$refs.formCustom.validate((valid) => {
if (valid) {
// 表单验证成功，通过事件将表单数据传递给父组件处理
this.$emit('submit', this.formCustom);
} else {
this.$Message.error('提交失败，请检查表单信息！');
}
});
},
handleReset() {
this.$refs.formCustom.resetFields(); // 重置表单字段数据
}
}
};
```
父组件：
HTML部分（只包含引入子组件的部分）：注意这里为了简洁并未引入整个组件的引用路径和注册信息。请根据实际需要修改。
```html
父组件内容