小程序流程做不起来_vue 表单验证按钮工作交由父

日期:2021-01-08 类型:行业动态 

关键词:凡科自助建站,企业网站怎么建设,智能建站系统,自己建个网站,搭建网站基本步骤

vue 表单验证按钮事件交由父组件触发的方法       这篇文章主要介绍了vue 表单验证按钮事件交由父组件触发的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80" FormItem label="Age" prop="age" Input type="text" v-model="formCustom.age" number /Input /FormItem FormItem Button type="primary" @click="handleSubmit('formCustom')" Submit /Button Button @click="handleReset('formCustom')" Reset /Button /FormItem /Form

子组件js部分

export default {
 data () {
 return {
 formCustom: {
 age: ''
 ruleCustom: {
 age: [
 { required: true, message: '年龄不为空', trigger: 'blur' }
 methods: {
 handleSubmit (name) {
 this.$refs[name].validate((valid) = {
 if (valid) {
 const form = this.formCustom
 // 在这将事件传递出去
 this.$emit('submit', form)
 } else {
 this.$Message.error('Fail!');
 handleReset (name) {
 this.$refs[name].resetFields();
}

父组件:

 //子组件
 modalContent @submit="handleSubmit"/ 

父组件js部分

import modalContent from '子组件位置(这里没写)'
export default {
 components: { modalContent },
 data () {
 return {}
 methods: {
 // 子组件的点击触发事件
 handleSubmit(form) {
 this.$ess('Success!');
} 

遇到某些xiagn要将按钮写在父组件上,但又需要调用子组件做验证之类的时候可以借鉴一下,验证请忽略,这里主要是按钮的事件

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