脚本宝典收集整理的这篇文章主要介绍了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：384754419，请注明来意。