mprojector,江端仪,五月思
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要将按钮写在父组件上,但又需要调用子组件做验证之类的时候可以借鉴一下,验证请忽略,这里主要是按钮的事件
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论