vue 表单验证按钮事件交由父组件触发的方法
2019/6/26 23:18:21
本文主要是介绍vue 表单验证按钮事件交由父组件触发的方法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
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 表单验证按钮事件交由父组件触发的方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist