手写实现el-form系列组件的核心逻辑 -- 练习组件通信

简介: 手写实现el-form系列组件的核心逻辑 -- 练习组件通信

手写实现el-form系列组件的核心逻辑 -- 练习组件通信


以前觉得element-ui肯定特别难写,最近在看组件通信,就试试写下el-form,当做练习了,这样以后自己也能试着看懂/开发高阶组件。

本文,一步步来,读者如果有耐心的话,最好也自己手敲一遍。

搭个架子

为了快捷方便,用vue create创建个项目,因为喜欢pug,,装个npm i pug pug-plain-loader -D

先看看官网,关于el-form使用的demo,然后将重点复制到App.vue,再新建相应的组件文件。

网络异常,图片无法展示
|

显示输入框

观察App.vue

  • el-form起码有属性modelrules,还有个方法validate
  • 因为el-form-item写在其内部,所以也肯定有slot
  • 同理,el-form-item起码有属性labelprop,和slot
  • el-input可以v-model,而v-modelvalueinput的语法糖

网络异常,图片无法展示
|

组件相互获取属性和事件

输入的时候,应该要判断输入值是不是有效。

输入是在el-input那边,验证是在el-input-item那边,那么就需要在el-input调用el-input-item的验证方法

但是呢,el-input-item必须知道规则和值才能验证,换言之,需要知道el-form的信息。

先考虑el-input-item怎么拿到el-form的属性

这两,这个demo里是父子组件的关系,但实际上,不一定,但起码是 前辈和后代的关系。

之前总结过,vue组件通信方式

组件内部嵌套层级不确定,后代组件想要祖先组件数据的话,可考虑provide/inject

网络异常,图片无法展示
|

再考虑el-input怎么调用el-input-item的方法

同理,这两,这个demo里是父子组件的关系,但实际上,不一定,但起码是 前辈和后代的关系。

这里虽然也可用provide,但是可以试试$parent,毕竟一个el-input-item通常只有一个el-input

$parent很多时候需要用到递归,这里抛砖引玉下。

网络异常,图片无法展示
|

验证单个表单元素

这里引入async-validator,之前写过一个大概怎么使用

el-form-item里已经知道prop/rule,所以引入之后,就很简单了,这边加了一个显示错误信息的属性。

网络异常,图片无法展示
|

这样输入的时候,能实时验证。

当用户在App.vue那边elForm.validate()的时候,el-form里的validate是对所有表单元素的validate进行了遍历,如果都是true,那就返回true,否则就是false

所有表单元素,其实就是el-form-item,综合组件通信方式,果断还是用下$children,这里也一样要递归拿到el-form-item

网络异常,图片无法展示
|
网络异常,图片无法展示
|

至此,el-form的核心思路就完成了,重点是知道各种通信方式的方法和使用思路。

代码

github的代码这边用分支进行阶段操作,需要的话,可以练习下。

  • 搭个架子 - git checkout init
  • 显示输入框 - git checkout show-input
  • 拿到el-form实例 - git checkout provide

顺手写了个el-menu系列组件,实现核心逻辑,用到了递归组件,有兴趣可以看看

目录
相关文章
|
20天前
|
缓存 JavaScript
vue2基础组件通信案例练习:把案例Todo-list改成使用自定义事件
vue2基础组件通信案例练习:把案例Todo-list改成使用自定义事件
16 2
|
2月前
|
前端开发
antd_使用Input封装实现Form校验效果(最终版)
本文介绍了在Ant Design (antd)框架中如何封装Input组件以实现表单校验效果,并提供了封装代码示例以及如何在提交时进行校验。
59 4
antd_使用Input封装实现Form校验效果(最终版)
|
2月前
Element table组件封装 核心:父子组件传值、传方法
本文介绍了如何基于Element UI的table组件进行二次封装,创建一个具有父子组件传值和传方法功能的自定义表格组件,并提供了封装后的组件如何引入、注册和使用的方法。
117 0
Element table组件封装 核心:父子组件传值、传方法
|
3月前
|
JavaScript 安全 数据安全/隐私保护
深入Node.js与Express:从表单接收到数据验证的完整指南——实战技巧揭秘后端开发中的表单处理流程
【8月更文挑战第31天】在Web开发中,处理表单数据至关重要。本文通过实例详细讲解了如何利用Node.js与Express框架接收和验证表单数据。首先,搭建环境并初始化一个简单的Express应用;接着,演示如何接收用户注册表单中的`username`和`email`字段;最后,引入`joi`模块进行数据验证,确保数据安全准确。掌握这些技能有助于开发者构建更安全、友好的Web应用。随着Node.js和Express的不断进步,未来将有更多高级功能值得期待。
71 0
|
4月前
element UI 组件封装--搜索表单(含插槽和内嵌组件)
element UI 组件封装--搜索表单(含插槽和内嵌组件)
129 5
|
4月前
|
移动开发 JavaScript 前端开发
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
42 0
|
6月前
封装组件,通过指令进行调用,类似于elementUI中的loading组件
封装组件,通过指令进行调用,类似于elementUI中的loading组件
48 0
|
SQL 前端开发 API
layui框架实战案例(17):流加载文档layui.flow组件的前后端解决方案
layui框架实战案例(17):流加载文档layui.flow组件的前后端解决方案
179 0
antd组件库封装46-button需求分析
antd组件库封装46-button需求分析
63 0
antd组件库封装46-button需求分析
|
JavaScript 前端开发
vue的组件化的理解之单独拆分的组件&组件的封装(以el-table组件的二次封装举例)
vue的组件化的理解之单独拆分的组件&组件的封装(以el-table组件的二次封装举例)
268 0