element-ui源码阅读笔记(button篇)

使用了差不多两年的vue，觉得需要提高下自己的水平，决定先从抄高质量组件开始。

element-ui使用了差不多一年，觉得很是舒服，先从最简单的按钮组件开始阅读源码，学习大神的代码习惯和代码思想。

亮点一：

computed: {_elFormItemSize() {return (this.elFormItem || {}).elFormItemSize; // ||或运算符},
},
复制代码

这个计算方法里使用 “||” 或运算符，代替常用的三目运算符

_elFormItemSize() {return this.elFormItem ? this.elFormItem.elFormItemSize : undefined; // 三目运算符
},
复制代码

达到的同样目的，又简化了代码。

亮点二：

computed: {_elFormItemSize() {return (this.elFormItem || {}).elFormItemSize;},buttonSize() {return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;},buttonDisabled() {return this.disabled || (this.elForm || {}).disabled;}
},
复制代码

disabled的属性只是从自身绑定或整个表单的禁用获取，而没有从el-form-item获取，这样可以减少相似的配置参数。

亮点三：

provide() {return {elForm: this};
},provide() {return {elFormItem: this};
},inject: {elForm: {default: ''},elFormItem: {default: ''}
},
复制代码

使用provide和inject来获取整个表单组件的公共参数，使得一处配置，全表单生效。

转载于:https://juejin.im/post/5b8ca600e51d453884363e76

element-ui源码阅读笔记(button篇)相关推荐

渲染引擎分析 - 鸿蒙(OpenHarmony) JS UI 源码阅读笔记
作者:门柳鸿蒙是华为研发的新一代终端操作系统,能适用于 IoT.手表.手机.Pad.电视等各种类型的设备上,扛起"国产操作系统"的大旗,也遭受了很多非议.2021 年 6 月初发 ...
源码阅读笔记 BiLSTM+CRF做NER任务流程图
源码阅读笔记 BiLSTM+CRF做NER任务(二) 源码地址:https://github.com/ZhixiuYe/NER-pytorch 本篇正式进入源码的阅读,按照流程顺序,一一解剖. 一.流 ...
CI框架源码阅读笔记4 引导文件CodeIgniter.php
到了这里,终于进入CI框架的核心了.既然是"引导"文件,那么就是对用户的请求.参数等做相应的导向,让用户请求和数据流按照正确的线路各就各位.例如,用户的请求url: http:// ...
【Flink】Flink 源码阅读笔记（20）- Flink 基于 Mailbox 的线程模型
1.概述转载:Flink 源码阅读笔记(20)- Flink 基于 Mailbox 的线程模型相似文章:[Flink]Flink 基于 MailBox 实现的 StreamTask 线程模型 Fl ...
【Flink】Flink 源码阅读笔记（15）- Flink SQL 整体执行框架
1.概述转载:Flink 源码阅读笔记(15)- Flink SQL 整体执行框架在数据处理领域,无论是实时数据处理还是离线数据处理,使用 SQL 简化开发将会是未来的整体发展趋势.尽管 SQL ...
[Linux] USB-Storage驱动源码阅读笔记（一）
USB-Storage驱动源码阅读笔记--从USB子系统开始最近在研究U盘的驱动,遇到很多难以理解的问题,虽然之前也参考过一些很不错的书籍如:<USB那些事>,但最终还是觉得下载一份最 ...
LinkedList源码阅读笔记
LinkedList源码阅读笔记初始化无参的 public LinkedList() {} 初始化的同时添加一个Collection public LinkedList(Collection< ...
dgl源码阅读笔记（3）——DeepWalk
dgl源码阅读笔记(3)--DeepWalk 图神经网络开源库dgl阅读笔记文章目录 dgl源码阅读笔记(3)--DeepWalk 图神经网络开源库dgl阅读笔记 @[TOC](文章目录) 前言一 ...
Transformers包tokenizer.encode()方法源码阅读笔记
Transformers包tokenizer.encode()方法源码阅读笔记_天才小呵呵的博客-CSDN博客_tokenizer.encode

element-ui源码阅读笔记(button篇)

element-ui源码阅读笔记(button篇)相关推荐

最新文章

热门文章