方法一：

父組件代碼：

<template><div><child-form ref='childRules' :addForm='addForm' > </child-form> <el-button @click='saveForm()' size=’medium’>保 存</el-button> </div></template><script>import childForm from ’./childForm’export default {data(){return {addForm: { name:'', desc: '' },} }, //組件引用 components: { childForm }, methods:{ //保存校驗 saveForm() { let flag = this.$refs[’childRules’].validateForm(); if(flag){ console.log(this.addForm); }else{ this.$message.error(’保全信息不完整，請繼續(xù)填寫完整’); } },}}</script><style></style>

//子組件代碼

<!-- --><template> <div class='form-content'> <el-form :model='addForm' :inline='true' :rules='formRules' ref='ruleForm' size=’mini’ label- class='form-mini'> <el-form-item label='名字' prop=’name’> <el-input v-model='addForm.name' ></el-input> </el-form-item> </el-form> </div></template><script> export default { name: ’’, props: { addForm: { type: Object, default: function () { return { } } } }, data() { //這里存放數(shù)據(jù) return { formRules: { name: [{ required: true, message: ’請輸入’, trigger: ’blur’ }] }, }; }, //監(jiān)聽屬性 類似于data概念 computed: {}, //監(jiān)控data中的數(shù)據(jù)變化 watch: {}, //過濾器 filters: {}, //方法集合 methods: { //子組件校驗，傳遞到父組件 validateForm () { let flag = null this.$refs[’ruleForm’].validate(valid => { if (valid) { flag = true } else { flag = false } }) return flag } } }</script><style lang=’less’> </style>

補充知識：vue element-ui表單驗證無效解決方案

在寫頁面的時候用到的element-ui庫中的表單驗證

出現(xiàn)如下問題

表單驗證效果已有 但驗證功能不正確。

檢查與對照官網(wǎng) 發(fā)現(xiàn)有二點如下所示

第一，在form上需要綁定對象，綁定規(guī)則

第二，在form-item上的prop需要與輸入框中的綁定對象命名相同。

改完之后，即可對輸入內(nèi)容進(jìn)行驗證

驗證內(nèi)容格式 可參考element-ui官網(wǎng)

以上這篇Vue element-ui父組件控制子組件的表單校驗操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。