溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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')" >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要將按鈕寫在父組件上，但又需要調用子組件做驗證之類的時候可以借鑒一下，驗證請忽略，這里主要是按鈕的事件
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
