手写实现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系列组件,实现核心逻辑,用到了递归组件,有兴趣可以看看

目录
相关文章
|
3月前
Vue3——基于tdesign封装一个通用的查询组件
Vue3——基于tdesign封装一个通用的查询组件
137 3
|
1月前
|
缓存 JavaScript
vue2基础组件通信案例练习:把案例Todo-list改成使用自定义事件
vue2基础组件通信案例练习:把案例Todo-list改成使用自定义事件
17 2
|
1月前
|
缓存 JavaScript
vue2基础组件通信案例练习:把案例Todo-list改成使用动画与过度
vue2基础组件通信案例练习:把案例Todo-list改成使用动画与过度
14 2
|
1月前
|
缓存 JavaScript
vue2基础组件通信案例练习:把案例Todo-list改成使用全局事件总线
vue2基础组件通信案例练习:把案例Todo-list改成使用全局事件总线
15 1
|
1月前
|
JavaScript 前端开发
VUE学习三:双向绑定指令(v-mode)、组件化开发(全局组件/局部组卷/组件通信)、组件化高级(slot插槽使用)
这篇文章是关于Vue.js框架中的v-model指令和组件化开发的详细教程,涵盖了从基础使用到高级功能的多个方面。
31 1
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中
循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中
|
4月前
|
移动开发 JavaScript 前端开发
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
44 0
|
6月前
封装组件,通过指令进行调用,类似于elementUI中的loading组件
封装组件,通过指令进行调用,类似于elementUI中的loading组件
50 0
|
SQL 前端开发 API
layui框架实战案例(17):流加载文档layui.flow组件的前后端解决方案
layui框架实战案例(17):流加载文档layui.flow组件的前后端解决方案
182 0
antd组件库封装47-button组件编写1
antd组件库封装47-button组件编写1
71 0
antd组件库封装47-button组件编写1