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 '子組件位置（這里沒(méi)寫）' 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)忽略，這里主要是按鈕的事件
（筆記的格式太丑了，看不下去了，在這做一下筆記）

總結(jié)

以上是生活随笔為你收集整理的vue 表单验证按钮事件交由父组件触发的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。