关于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 相关文章推荐
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
Bootstrap基础学习
Jun 16 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
TS 类型收窄教程示例详解
Sep 23 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
PHP5中MVC结构学习
2006/10/09 PHP
留言板翻页的实现详解
2006/10/09 PHP
第十二节--类的自动加载
2006/11/16 PHP
PHP 开发环境配置(Zend Studio)
2010/04/28 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
微信小程序实现选项卡功能
2020/06/19 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
QML用PathView实现轮播图
2020/06/03 Python
python 操作excel表格的方法
2020/12/05 Python
财务会计毕业生自荐信
2013/11/02 职场文书
怎样填写就业意向
2014/04/02 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP