脚本宝典收集整理的这篇文章主要介绍了

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

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过