vue 表单验证按钮事件交由父组件触发的方法
vue表单验证按钮事件交由父组件触发,不直接再子组件上操作的方法
子组件:
//内容部分Submit
子组件js部分
exportdefault{ data(){ return{ formCustom:{ age:'' }, ruleCustom:{ age:[ {required:true,message:'年龄不为空',trigger:'blur'} ] } } }, methods:{ handleSubmit(name){ this.$refs[name].validate((valid)=>{ if(valid){ constform=this.formCustom //在这将事件传递出去 this.$emit('submit',form) }else{ this.$Message.error('Fail!'); } }) }, handleReset(name){ this.$refs[name].resetFields(); } } }
父组件:
//子组件
父组件js部分
importmodalContentfrom'子组件位置(这里没写)' exportdefault{ components:{modalContent}, data(){ return{} }, methods:{ //子组件的点击触发事件 handleSubmit(form){ this.$Message.success('Success!'); } } }
遇到某些xiagn要将按钮写在父组件上,但又需要调用子组件做验证之类的时候可以借鉴一下,验证请忽略,这里主要是按钮的事件
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。