vue父组件调用子组件的表单验证方法
需求:父组件调用子组件的表单验证方法,验证成功,继续进行接下来的操作,验证失败,提示用户并返回。一、在父组件中引入子组件<el-dialog:title="title":visible.sync="dialogVisible"width="50%":before-close="handleClose"><exciter-edit ref="alternatorRef" />
·
需求:父组件调用子组件的表单验证方法,验证成功,继续进行接下来的操作,验证失败,提示用户并返回。
一、在父组件中引入子组件
<el-dialog
:title="title"
:visible.sync="dialogVisible"
width="50%"
:before-close="handleClose"
>
<exciter-edit ref="alternatorRef" />
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="transformerConfirm(insEdit)"
>确 定</el-button
>
</span>
</el-dialog>
二、在父组件中点击【确 定】按钮调用方法
async transformerConfirm(value) {
//调用校验子组件的方法
let flag = await this.$refs.alternatorRef.justify()
//如果子组件校验方法返回ture,则接着进行其他操作,返回false则提示用户
if (flag) {
//to do something
} else {
this.$message.warning('校验失败')
}
},
三、子组件中的校验方法
async justify() {
//校验成功则方法自动返回true,校验方法报错则说明校验失败,返回false
try {
return await this.$refs['ruleFormRef'].validate()
} catch (error) {
return false
}
},
更多推荐
已为社区贡献6条内容
所有评论(0)