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.$Message.success('Success!');
    }
  }
}

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

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

网站栏目：vue表单验证按钮事件交由父组件触发的方法
网页地址：https://www.cdcxhl.com/article32/gdoppc.html

成都网站建设公司_创新互联，为您提供营销型网站建设、品牌网站建设、静态网站、网站收录、服务器托管、企业建站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容