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

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

子组件：

//内容部分

子组件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();
    }
  }
}

父组件：

 //子组件
 

父组件js部分

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

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

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