参考:

ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95

Vue 子组件调用父组件方法总结:https://juejin.im/post/5c1370365188250f73759a79

Vue表单类的父子组件数据传递:https://juejin.im/entry/5ae32bc75188256717760b13

Vue官方文档:https://cn.vuejs.org/v2/guide/components-custom-events.html#%E4%BA%8B%E4%BB%B6%E5%90%8D

Vee-validate 父组件获取子组件表单校验结果:https://www.jianshu.com/p/cebbb08356e8

vue.js 父组件如何触发子组件的方法:https://www.cnblogs.com/mophy/p/8590291.html


当一个组件中表单过多时,需要将form表单抽取到一个单独的组件中,再从父组件中引用

其中,需要在父组件中对子组件中的表单进行校验,这其中涉及到父子组件的数据传递,以及父子组件之间的方法相互调用

在表单校验方面,我主要在子组件中写好校验表单的方法,在父组件中对子组件的校验方法进行调用

由于form表单中的数据需要双向绑定,即对 props 内的属性进行双向绑定时,就需要用到 .sync 修饰符,参考文档:https://cn.vuejs.org/v2/guide/components-custom-events.html#事件名

父组件:

dialog弹窗部分:

    <el-dialog
v-dialogDrag
:close-on-click-modal="false"
width="500px"
title="新增生产基地信息"
:visible.sync="dialogFormAddNew"
:lock-scroll="true"
center
@close="cleanAddNew"
>
<add-new ref="addnew" @fetchData="fetchProductBase" @close="closeAddNew" :addnewData.sync="fpojo" :isEdit="isEdit"></add-new>
<div slot="footer" class="dialog-footer">
<el-button @click="closeAddNew">取 消</el-button>
<el-button @close="closeAddNew" type="primary" @click="addData()">确 定</el-button>
</div>
</el-dialog>
<add-new ref="addnew" @fetchData="fetchProductBase" @close="closeAddNew" :addnewData.sync="fpojo" :isEdit="isEdit"></add-new>

绑定属性:

  ref:表单名,表单验证时要用到,子组件form表单在父组件中的名字

  isEdit:自定义属性,用于判断是否为编辑状态

  addnewData.sync:form表单的属性

绑定事件:

  fetchData:刷新数据

  close:关闭窗口

方法:

    //提交新增数据
addData(formName) {
// 父组件调用子组件方法进行校验,并提交新增数据
this.$refs.addnew.validataForm();
},

子组件:

注意:在子组件中:<div></div>是必须要存在的 

  <div>
<el-form
:rules="rules"
ref="addNewForm"
label-width="100px"
label-position="right"
:model="spojo"
center
>
..............................
</div>
export default {
name: "add-new",
props: {
addnewData: {
type: Object
},
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
spojo: {
....................
}, //新增提交的数据
rules: {
//校验规则
baseName: [
//required: true为必填
{ required: true, message: "基地名称不能为空", trigger: "blur" }
],
baseArea: [
//required: true为必填
{ required: true, message: "基地面积不能为空", trigger: "blur" }
],
positionMessage: [
//required: true为必填
{ required: true, message: "位置信息不能为空", trigger: "blur" }
]
}
};
},

methods:(表单验证)

  methods: {
// 子组件校验表单
validataForm() {
this.$refs["addNewForm"].validate(valid => {
if (valid) {
//提交表单
console.log("addData");
console.log(this.spojo);
productionAreaMockApi.add(this.spojo).then(response => {
const resp = response.data;
if (resp.flag) {
// 新增成功,刷新列表数据
this.$emit("fetchData");
// this.dialogFormAddNew = false; //关闭窗口
this.$emit("close");
console.log(resp.flag)
} else {
// 失败,出现提示信息
this.$message({
message: resp.message,
type: "warning"
});
}
});
} else {
return false;
}
});
}

父子组件之间的数据传递,可在编辑表单数据时使用,(如打开编辑,需要将当前行的数据显示在表单上,此时需要父子组件间的数据传递)

参考:https://juejin.im/entry/5ae32bc75188256717760b13

 // 因为不能直接修改props里的属性,所以不能直接addnewData通过v-model进行绑定
// 在这里我们需要监听addnewData,当它发生变化时,立即将值赋给data中的spojo
watch: {
addnewData: {
immediate: true,
handler(val) {
this.spojo = val;
}
}
}, mounted() {
// props是单向数据流,通过触发update事件绑定addnewData,
// 将data里的spojo指向父组件通过addnewData绑定的那个对象
// 父组件在绑定addnewData的时候,需要加上.sync
this.$emit("update:addnewData", this.spojo);
},

  

vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单的更多相关文章

  1. Vue的父子组件间通信及借助$emit和$on解除父子级通信的耦合度高的问题

    1.父子级间通信,父类找子类非常容易,直接在子组件上加一个ref,父组件直接通过this.$refs操作子组件的数据和方法    父 这边子组件中 就完成了父 => 子组件通信 2. 子 =&g ...

  2. 聊聊Vue.js组件间通信的几种姿势

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...

  3. Blazor入门笔记(6)-组件间通信

    1.环境 VS2019 16.5.1.NET Core SDK 3.1.200Blazor WebAssembly Templates 3.2.0-preview2.20160.5 2.简介 在使用B ...

  4. vue之父子组件间通信实例讲解(props、$ref、$emit)

       组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 组件是 vue.js 最强大的功能之一,而组件实例 ...

  5. 【Vue】利用父子组件间通信实现一个场景

    组件间通信是组件开发的,我们既希望组件的独立性,数据能互不干扰,又不可避免组件间会有联系和交互. 在vue中,父子组件的关系可以总结为props down,events up: 在vue2.0中废弃了 ...

  6. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  7. vue组件间通信六种方式(完整版)

    本文总结了vue组件间通信的几种方式,如props. $emit/ $on.vuex. $parent / $children. $attrs/ $listeners和provide/inject,以 ...

  8. Vue组件间通信6种方式

    摘要: 总有一款合适的通信方式. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的 ...

  9. 【Vue】组件的基础与组件间通信

    转载:https://segmentfault.com/a/1190000016409329 Vue.js 最核心的功能就是组件(Component),从组件的构建.注册到组件间通信,Vue .x 提 ...

  10. Vue中组件间通信的方式

    Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...

随机推荐

  1. Algo: Basic

    1. 二维数组的查找 2. 替换空格 3. 从尾到头打印链表 4. 重建二叉树 5. 用两个栈实现队列 6. 旋转数组的最小数字 7. 斐波那契数列 8. 跳台阶 9. 变态跳台阶 10. 矩阵覆盖 ...

  2. phonegap 开发指南系列(3) ----在Eclipse中Android开发环境搭建

      前提条件:已在Eclipse中安装好Android SDK 和 ADT. 1.下载PhoneGap,解压. 2.用Eclipse新建一个安卓项目. 3.将phoneGap解压包里的Android文 ...

  3. thinkphp ASSIGN标签

    ASSIGN标签用于在模板文件中赋值变量,用法如下: 直线电机厂家 <assign name="var" value="123" /> 在运行模板的 ...

  4. thinkphp 模版引擎

    系统支持原生的PHP模板,而且本身内置了一个基于XML的高效的编译型模板引擎,系统默认使用的模板引擎是内置模板引擎,关于这个模板引擎的标签详细使用可以参考模版引擎部分. 内置的大理石平台检定规程模板引 ...

  5. day 57 Django基础五之django模型层之关联管理器

    Django基础五之django模型层之关联管理器   class RelatedManager "关联管理器"是在一对多或者多对多的关联上下文中使用的管理器.它存在于下面两种情况 ...

  6. 靖烜小哥哥之mybatis总结

    MyBatis是一个半自动映射的框架.“半自动”是相对于Hibernate全表映射而言的,MyBatis需要手动匹配提供POJO.SQL和映射关系,而Hibernate只需提供POJO和映射关系即可. ...

  7. Oracle 从 dual 表中查询返回多行记录

    同时查询出十条数据 ; 按照这个特性计算两个日期之间的工作日: select days, week as days, to_char(to_date(, 'day') as week from dua ...

  8. 一个tcp连接可以发多少http请求

    -----来自:松若章 -----zhuanlan.zhihu.com/p/61423830 曾经有这么一道经典面试题:从 URL 在浏览器被被输入到页面展现的过程中发生了什么?相信大多数准备过的同学 ...

  9. 【笔记篇】Ubuntu一日游

    今天做数据的时候在Windows下出问题了(好像是爆栈了QAQ) 于是乎就打开了自己的Ubuntu虚拟机… 然而沉迷Windows的我已经忘记自己对这台虚拟机做过什么(比如装残了一个ycm自己都不知道 ...

  10. js怎样把URL链接的参数截取出来

    有时候,A页面参数需要传递到B页面,则把参数拼接到跳转B页面的url上,这时怎样在另一个页面截取A页面传递的参数呢,主要代码如下 /** * 获取指定的URL参数值 URL:http://www.qu ...