vue 表單驗證按鈕事件交由父組件觸發(fā)的方法
更新時間：2018年12月17日 14:33:33 作者：Linan
這篇文章主要介紹了vue 表單驗證按鈕事件交由父組件觸發(fā)的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
最近入門vue,用字節(jié)跳動的arco初始化一個項目的時候報錯自己解決后沒來的及截圖,從別人那拷貝個網(wǎng)圖把,是一樣的報錯,本文給大家分享vue 解決報錯問題小結(jié),感興趣的朋友一起看看吧2023-09-09
這篇文章教大家如何分分鐘玩轉(zhuǎn)Vue.js組件,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
vue中watch監(jiān)聽器用法之deep、immediate、flush
Vue是可以監(jiān)聽到多層級數(shù)據(jù)改變的,且可以在頁面上做出對應展示,下面這篇文章主要給大家介紹了關(guān)于vue中watch監(jiān)聽器用法之deep、immediate、flush的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細介紹了Vue標尺插件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
Vue2.0+ElementUI實現(xiàn)查詢條件展開和收起功能組件(代碼示例)
文章介紹了如何將查詢條件表單封裝成一個通用組件,以提高開發(fā)效率,組件支持多條件的折疊和展開功能,并提供了使用示例,感興趣的朋友一起看看吧2025-01-01
vue項目中在可編輯div光標位置插入內(nèi)容的實現(xiàn)代碼
這篇文章主要介紹了vue項目中在可編輯div光標位置插入內(nèi)容的實現(xiàn)代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了vue中如何安裝使用jquery的教程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了Vue中引入swiper報錯的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這次給大家?guī)韛ue-cli3.0配置詳解，使用vue-cli3.0配置的注意事項有哪些？本文通過實戰(zhàn)案例給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2018-09-09
Vue?Electron實現(xiàn)輸入法自動刷字數(shù)功能詳解
這篇文章主要介紹了Vue?Electron實現(xiàn)輸入法自動刷字數(shù)功能，文中的示例代碼講解詳細，對我們學習C#有一定的幫助，感興趣的小伙伴可以跟隨小編一起了解一下2022-12-12