欢迎来到站长教程网!

Javascript/Ajax

当前位置:主页 > 网页制作 > Javascript/Ajax >

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

时间:2021-05-05|栏目:Javascript/Ajax|点击:

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的表单组件整理笔记

到这里就算是完成了,感激各人的寓目,本人只是个小菜鸡,假如各人发明有什么处所差池的,请立马提出你名贵的意见更正我,感谢

总结

上一篇:如安在vue中利用video.js播放m3u8名目标视频

栏    目:Javascript/Ajax

下一篇:详解JavaScript中的this指向问题

本文标题:关于element的表单组件整理条记

本文地址:www.jiaocheng88.com.cn/JavaScript/61989.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:584415406 | 邮箱:584415406#qq.com(#换成@)

Copyright © 2015-2020 小白站长教程网 版权所有 苏ICP备20040415号-3