vue 表单验证按钮事件交由父组件触发的方法
编程学习 2021-07-04 16:47www.dzhlxh.cn编程入门
这篇文章主要介绍了vue 表单验证按钮事件交由父组件触发的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
vue 表单验证按钮事件交由父组件触发，不直接再子组件上操作的方法
子组件：
//内容部分
<Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
<FormItem label="Age" prop="age">
<Input type="text" v-model="formCustom.age" number></Input>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formCustom')">Submit</Button>
<Button @click="handleReset('formCustom')" style="margin-left: 8px">Reset</Button>
</FormItem>
</Form>
子组件js部分
export default {
data () {
return {
formCustom: {
age: ''
},
ruleCustom: {
age: [
{ required: true, message: '年龄不为空', trigger: 'blur' }
]
}
}
},
methods: {
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
const form = this.formCustom
// 在这将事件传递出去
this.$emit('submit', form)
} else {
this.$Message.error('Fail!');
}
})
},
handleReset (name) {
this.$refs[name].resetFields();
}
}
}
父组件：
//子组件 <modalContent @submit="handleSubmit"/>
父组件js部分
import modalContent from '子组件位置（这里没写）'
export default {
components: { modalContent },
data () {
return {}
},
methods: {
// 子组件的点击触发事件
handleSubmit(form) {
this.$Message.success('Success!');
}
}
}
遇到某些xiagn要将按钮写在父组件上，但又需要调用子组件做验证之类的时候可以借鉴一下，验证请忽略，这里主要是按钮的事件
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。