微客导航 » 文章资讯 » vue 表单验证按钮事件交由父组件触发的方法

vue 表单验证按钮事件交由父组件触发的方法

2023-09-02 19:55:07 433

vue表单验证按钮事件交由父组件触发，不直接再子组件上操作的方法

子组件：

//内容部分






Submit
Reset

子组件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要将按钮写在父组件上，但又需要调用子组件做验证之类的时候可以借鉴一下，验证请忽略，这里主要是按钮的事件

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

vue 表单验证按钮事件交由父组件触发的方法

热门推荐

随机推荐