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要将按钮写在父组件上,但又需要调用子组件做验证之类的时候可以借鉴一下,验证请忽略,这里主要是按钮的事件
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。