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')" 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: {// 子組件的點擊觸發事件handleSubmit(form) {this.$Message.success('Success!');}} }

遇到某些xiagn要將按鈕寫在父組件上，但又需要調用子組件做驗證之類的時候可以借鑒一下，
驗證請忽略，這里主要是按鈕的事件
（筆記的格式太丑了，看不下去了，在這做一下筆記）

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。