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要將按鈕寫在父組件上,但又需要調用子組件做驗證之類的時候可以借鑒一下,驗證請忽略,這里主要是按鈕的事件
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答