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)忽略，這里主要是按鈕的事件

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長(zhǎng)站。