vue 表單驗證按鈕事件交由父元件觸發

weixin_33763244發表於2018-12-17
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要將按鈕寫在父元件上，但又需要呼叫子元件做驗證之類的時候可以借鑑一下，
驗證請忽略，這裡主要是按鈕的事件
（筆記的格式太醜了，看不下去了，在這做一下筆記）

相關文章