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