组件拆分出去后如何进行表单验证
父组件
<component
:maintainStatus="maintainStatus"
:maintainTitle="maintainTitle"
:maintainCodeIpt="maintainCodeIpt" //如何进行表单验证
:maintainNameIpt="maintainNameIpt" //如何进行表单验证
@confirmEvent="confirmEvent"
@cancelEvent="cancelEvent"
>
</component>
子组件:
<template>
<div>
<Modal
:value="maintainStatus"
:title="maintainTitle"
:maskClosable="false"
>
<Form :label-width="110" ref="formValidate" :model="formValidate" :rules="ruleValidate" :show-message="false">
<Row>
<Col span="24">
<FormItem label="编码:" prop="maintainCodeIpt" class="formItemMargin">
<Input type="text" v-model="formValidate.maintainCodeIpt" placeholder="请输入编码"/>
</FormItem>
</Col>
</Row>
<Row>
<Col span="24">
<FormItem label="名称:" prop="maintainNameIpt" class="formItemMargin">
<Input type="text" v-model="formValidate.maintainNameIpt" placeholder="请输入名称"/>
</FormItem>
</Col>
</Row>
</Form>
<Row slot="footer" type="flex" justify="end">
<Col>
<Button type="success" @click="confirmEvent">确认</Button>
<Button class="cancelButton" @click="cancelEvent">取消</Button>
</Col>
</Row>
</Modal>
</div>
</template>
<script>
export default {
props:{
formValidate:{
maintainCodeIpt:{
type:String
},
maintainNameIpt:{
type:String
}
},
ruleValidate:{
maintainCodeIpt:[
{ requires:true,message:'不能为空!',trigger:'blur'}
],
maintainNameIpt:[
{ requires:true,message:'不能为空!',trigger:'blur'}
]
},
maintainStatus:{
default:false,
type:Boolean
},
maintainTitle:{
type:String,
}
},
data(){
return {
}
},
methods:{
confirmEvent(){
this.$emit('confirmEvent')
},
cancelEvent(){
this.$emit('cancelEvent')
},
}
}
</script>