关于element的表单组件整理笔记


Posted in Javascript onFebruary 05, 2021

element表单及代码的展示

详细可以看element表单官方网址

结构、功能分析

通过介绍以及源码可以发现,表单是具有收集、校验、提交数据三个功能的。

他的基本结构如下:

<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
 <el-form-item label="账号" prop="name">
 <el-input v-model="ruleForm.name"></el-input>
 </el-form-item>
</el-form>

通用组件的特点就是:高内聚、低耦合,根据这个特点,我们所要写的组件就应该是一个模块负责一个功能(功能单一、提高复用性),同时减少他们之间交互带来的不良影响。

分析上面源码的基本结构:

form:model:rules 分别是用于接受数据模型校验规则、使用ref属性进行了注册,方便后续操作DOM

item: 通过prop得到当前数据的值

input: 双向绑定管理数据

那么就可以得知他们分别负责的功能是收集、校验、提交数据

那么下面就用我们最常见的登录注册功能来从小往大开始写一遍代码

input组件实现

首先明确目标:input组件只需要实现双向绑定,起到管理数据的功能即可

双向绑定的实现需要用到v-model,在以往学习过程中,v-model语法糖其实是可以拆分成v-bing:valuev-on:input两个,在绑定数据的时候同时监听事件。

下面粘贴一些代码截图,方便下面记录:

父组件:

关于element的表单组件整理笔记

子组件:

关于element的表单组件整理笔记

首先明确Input需要实现的功能:通过双向绑定维护数据

那么只需要搞懂双向绑定的值与监听的事件分别是什么就行。

为了方便管理数据,input子组件里绑定的值应该是父组件传进来的值

值得注意的是:在子组件的input事件里,一般是一个单向数据流,那么当数据发生变化的时候,只需要派生一个事件给父组件,再通过监听父组件传进来的值,从而实现改变数据,实现一个父传子、子传父的单向循环

item组件的实现

父组件:

关于element的表单组件整理笔记

子组件:

关于element的表单组件整理笔记

item子组件需要完成的功能为:校验

我们先写一个模板,校验功能等到后面再完善

form组件的实现

父组件:

关于element的表单组件整理笔记

子组件:

关于element的表单组件整理笔记

form实现的功能:接收数据和校验规则

所以需要声明这两个属性方便接收

关于element的表单组件整理笔记

基本的框架都完成了,下面就是核心问题

核心问题

 ①在form里接受的数据和规则,但是需要用的地方却是在item里,那么我们怎么把值传下去呢 => provide和inject

虽然目前我们要用到的值只有imformation和rules,但是为了方便,我们传的值是this,这样以后就可以通过this,在子代拿到父代以及更高级的实例.

在form组件里加入provide

关于element的表单组件整理笔记

其他需要用的数据的组件里加入inject

关于element的表单组件整理笔记

使用例子:

关于element的表单组件整理笔记

②通知校验、进行校验

在input组件里派发一个事件给自己的父级item,通知它校验

关于element的表单组件整理笔记

在item里接收这个事件并实现

关于element的表单组件整理笔记

关于element的表单组件整理笔记

关于element的表单组件整理笔记

在validate方法里,首先我们要获取到校验的规则和需要被校验的值,那么我们之前通过provide和inject已经把值传下来了,现在通过在item里加一个prop,这样就可以通过prop定位拿到我们想要的值

接下来我们安装一个第三方库 npm i async-validator -S(可以执行很多异步的校验规则)

async-validator使用

然后在item里引入使用

关于element的表单组件整理笔记
关于element的表单组件整理笔记

到这里其实基本就算完成了,为了更好的使用,一般是有一个提交按钮,点击后再进行全局校验的

提交功能

父组件:

关于element的表单组件整理笔记

关于element的表单组件整理笔记

form子组件:

关于element的表单组件整理笔记

到这里就算是完成了,感谢大家的观看,本人只是个小菜鸡,如果大家发现有什么地方不对的,请立马提出你宝贵的意见纠正我,谢谢

总结

到此这篇关于关于element表单组件的文章就介绍到这了,更多相关element表单组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery 动态酷效果实现总结
Dec 27 Javascript
JS鼠标滑过图片时切换图片实现思路
Sep 12 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
shiro授权的实现原理
Sep 21 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
JS数组的常用10种方法详解
May 08 Javascript
原生JS运动实现轮播图
Jan 02 Javascript
详解JavaScript中的this指向问题
Feb 05 #Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 #Javascript
详解javascript脚本何时会被执行
Feb 05 #Javascript
前端如何实现动画过渡效果
Feb 05 #Javascript
原生js拖拽功能制作滑动条实例代码
Feb 05 #Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 #jQuery
如何在JavaScript中使用localStorage详情
Feb 04 #Javascript
You might like
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
Laravel学习教程之从入口到输出过程详解
2017/08/27 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
php源码的使用方法讲解
2019/09/26 PHP
JSON 入门指南 想了解json的朋友可以看下
2009/08/26 Javascript
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
js瀑布流布局的实现
2020/06/28 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
python读取excel表格生成erlang数据
2017/08/26 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
制冷与电控专业应届生求职信
2013/11/11 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
党员个人总结自评
2015/02/14 职场文书
小学生表扬稿范文
2015/05/05 职场文书
个人收入证明格式
2015/06/24 职场文书
MySQL RC事务隔离的实现
2022/03/31 MySQL
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技
Go语言测试库testify使用学习
2022/07/23 Golang