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')" style="margin-left: 8px">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要将按钮写在父组件上,但又需要调用子组件做验证之类的时候可以借鉴一下,
验证请忽略,这里主要是按钮的事件
(笔记的格式太丑了,看不下去了,在这做一下笔记)

    原文作者:Linan
    原文地址: https://segmentfault.com/a/1190000017398599
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞