vue表單驗證按鈕事件交由父組件觸發(fā)的方法

//內(nèi)容部分

<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>

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"/>

import modalContent from '子組件位置（這里沒寫）'
export default {
  components: { modalContent },
  data () {
    return {}
  },
  methods: {
    // 子組件的點擊觸發(fā)事件
    handleSubmit(form) {
      this.$Message.success('Success!');
    }
  }
}