极乐门资源网 Design By www.ioogu.com

方法一:

父组件代码:

<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('保全信息不完整,请继续填写完整');
			    } 
			   },
			}
	}
</script>
<style></style>

//子组件代码

 <!-- -->
<template>
 <div class="form-content">
  <el-form :model="addForm" :inline="true"  :rules="formRules" ref="ruleForm"
   size='mini' label-width="120px" 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() {
   //这里存放数据
   return { 
    formRules: {
     name: [{
      required: true,
      message: '请输入',
      trigger: 'blur'
     }] 
    }, 
   };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  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库中的表单验证

出现如下问题

Vue element-ui父组件控制子组件的表单校验操作

表单验证效果已有 但验证功能不正确。

检查与对照官网 发现有二点如下所示

Vue element-ui父组件控制子组件的表单校验操作

第一,在form上需要绑定对象,绑定规则

第二,在form-item上的prop需要与输入框中的绑定对象命名相同。

改完之后,即可对输入内容进行验证

验证内容格式 可参考element-ui官网

以上这篇Vue element-ui父组件控制子组件的表单校验操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

标签:
Vue,element-ui,父组件,子组件,表单校验

极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“Vue element-ui父组件控制子组件的表单校验操作”

暂无Vue element-ui父组件控制子组件的表单校验操作的评论...