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')" >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要将按钮写在父组件上，但又需要调用子组件做验证之类的时候可以借鉴一下，验证请忽略，这里主要是按钮的事件
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持亿速云。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
