vue 表單驗證按鈕事件交由父組件觸發(fā)的方法
更新時間:2018年12月17日 14:33:33 作者:Linan
這篇文章主要介紹了vue 表單驗證按鈕事件交由父組件觸發(fā)的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
vue 表單驗證按鈕事件交由父組件觸發(fā),不直接再子組件上操作的方法
子組件:
//內(nèi)容部分 <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: { // 子組件的點擊觸發(fā)事件 handleSubmit(form) { this.$Message.success('Success!'); } } }
遇到某些xiagn要將按鈕寫在父組件上,但又需要調(diào)用子組件做驗證之類的時候可以借鑒一下,驗證請忽略,這里主要是按鈕的事件
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue結(jié)合vue-electron創(chuàng)建應(yīng)用程序小結(jié)
這篇文章主要介紹了vue結(jié)合vue-electron創(chuàng)建應(yīng)用程序,本文給大家介紹了安裝electron有兩種方式,兩種方式創(chuàng)建的項目結(jié)構(gòu)大不相同,需要的朋友可以參考下2024-03-03詳解Vue-cli3 項目在安卓低版本系統(tǒng)和IE上白屏問題解決
這篇文章主要介紹了Vue-cli3 項目在安卓低版本系統(tǒng)和 IE 上白屏問題解決,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-04-04vue等待數(shù)據(jù)渲染完成后執(zhí)行下一個方法問題
這篇文章主要介紹了vue等待數(shù)據(jù)渲染完成后執(zhí)行下一個方法問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12項目遷移vite引入圖片資源報require?is?not?defined問題的解決辦法
這篇文章主要給大家介紹了關(guān)于項目遷移vite引入圖片資源報require?is?not?defined問題的解決辦法,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vite具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01