The vue form verification button event is triggered by the parent component and does not operate directly on the child component.
Subcomponents:
//Content part
<Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
<FormItem label="Age" prop="age">
<Input type="text" v-model="" number></Input>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formCustom')">Submit</Button>
<Button @click="handleReset('formCustom')" style="margin-left: 8px">Reset</Button>
</FormItem>
</Form>
Subcomponent js part
export default {
data () {
return {
formCustom: {
age: ''
},
ruleCustom: {
age: [
{ required: true, message: 'Age is not empty', trigger: 'blur' }
]
}
}
},
methods: {
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
const form =
// Pass the event out here this.$emit('submit', form)
} else {
this.$('Fail!');
}
})
},
handleReset (name) {
this.$refs[name].resetFields();
}
}
}
Parent component:
//Subcomponent <modalContent @submit="handleSubmit"/>
Parent component js part
import modalContent from 'Subcomponent location (not written here)'
export default {
components: { modalContent },
data () {
return {}
},
methods: {
// The click trigger event of the child component handleSubmit(form) {
this.$('Success!');
}
}
}
When you encounter some xiagn that you want to write the button on the parent component, but you need to call the child component for verification, etc., you can refer to it. Please ignore the verification, this is mainly the button event.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.