Element-ui源码解析(二):最简单的组件Button

好家伙,为了有足够的能力去开发组件,先研究一下别人的组件

开始抄袭模仿我们的行业标杆element-ui

 

找到Button组件的源码

 只有三个文件,看上去非常易读,开搞

 

 其中最重要的部分,自然是button.vue

 

既然是.vue那么我们把它分成DOM,属性,方法三部分来分析

我们首先看属性,看完属性,你自然知道DOM里面的值绑的是什么鬼了

 

1.属性

    name: 'ElButton',
    //inject用于接收父组件的传值,然而我并找到传这个值的父组件
    inject: {
      elForm: {
        default: ''
      },
      elFormItem: {
        default: ''
      }
    },

    props: {
      //按钮大样式
      type: {
        type: String,
        default: 'default'
      },
      //大小选择
      size: String,
      //图标选择
      icon: {
        type: String,
        default: ''
      },
      // 按钮小样式
      nativeType: {
        type: String,
        default: 'button'
      },
      loading: Boolean, //是否加载中状态
      disabled: Boolean, //是否禁用状态
      plain: Boolean, //是否朴素按钮
      autofocus: Boolean,//是否默认聚焦
      round: Boolean, //是否圆角按钮
      circle: Boolean//是否圆形
    },
    computed: {
      //父组件的值,
      _elFormItemSize() {
        return (this.elFormItem || {}).elFormItemSize;
      },
      //按钮尺寸属性
      //其中,在越左边的属性优先级越高,size的属性优先级最高
      buttonSize() {
        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
      },
      //按钮是否禁用
      buttonDisabled() {
        return this.$options.propsData.hasOwnProperty('disabled') ? this.disabled : (this.elForm || {}).disabled;
      //this.$options.propsData 是一个包含了组件实例的 props 数据的对象。 
      //hasOwnProperty('disabled') 是 JavaScript 中的一个方法，用于判断对象是否具有某个属性。
      }
    },

总体看上去没有什么难理解的点,但还是有几个地方要注意

 

问题一:在计算属性computed中

 

//父组件的值,
      _elFormItemSize() {
        return (this.elFormItem || {}).elFormItemSize;
      },

为什么是

(this.elFormItem || {}).elFormItemSize;

而不直接写成

this.elFormItem.elFormItemSize

 

答:

这段代码使用`(this.elFormItem || {}).elFormItemSize`的形式来获取 `elFormItemSize`属性的值。

`(this.elFormItem || {})`的作用是先判断 this.elFormItem 是否存在，

如果存在则返回 `this.elFormItem` 的值，否则返回一个空对象 `{}`。

在这种情况下，如果 `this.elFormItem` 不存在，那么后续对 `elFormItemSize` 的访问将会返回 `undefined`。

这种写法是为了避免在 `this.elFormItem` 为 `null` 或 `undefined` 的情况下访问 `elFormItemSize` 属性时出现报错。

通过使用短路运算符 `||` 和空对象 `{}`，可以确保代码的健壮性，

即,使 `this.elFormItem` 不存在也不会导致程序崩溃，而是安全地访问属性并返回结果。

 

 

第二部分:DOM

<template>
    
       
      
      
    
  

注释版本:

 

2.1.问题一:"class"与:"class"的优先级?

答:当同一个元素同时存在 class 和 :class 属性时，class 属性中的类名会与 :class 动态计算的类名进行合并，

但是 :class 的优先级更高。:class 中定义的类名会覆盖 class 中的类名。

 

2.2.问题二:":class"中的样式如何渲染

1.type ? 'el-button--' + type : '  '：这个表达式根据type变量的值，生成一个按钮类型的class。

如果type有值（不为false、null、undefined、0或空字符串），则生成类似于el-button--type的class，否则生成空字符串。

   

2.buttonSize ? 'el-button--' + buttonSize : '  '：这个表达式根据buttonSize变量的值，生成一个按钮大小的class。

如果buttonSize有值，则生成类似于el-button--buttonSize的class，否则生成空字符串。

   

3.对象字面量{ }用于根据变量的真假值来动态添加/移除某些class。

根据以下变量的值，如果为真，则添加相应的class：'is-disabled'（按钮禁用状态），

'is-loading'（按钮加载中状态），'is-plain'（按钮朴素风格），'is-round'（按钮圆角风格），

'is-circle'（按钮圆形风格）。

 

 

2.3.关于原生属性autofocus的作用?

autofocus属性是HTML中用于设置按钮自动聚焦的属性。

当页面加载完成后，被设置为autofocus的按钮将自动获取焦点，无需用户操作。

这可以提供用户友好的交互，特别是当页面上有多个按钮时，自动聚焦可以使页面更易于导航。

使用autofocus属性的语法如下所示：

Submit

在这个例子中，当页面加载完成后，提交按钮将自动获得焦点，用户可以直接通过按下回车键来提交表单（如果有,登陆注册）。

 

 

第三部分:JS方法

methods: {
    handleClick(evt) {
      this.$emit('click', evt);
    }
    //触发'click'方法,并将evt作为参数传入
  }

触发自定义方法click,将evt作为参数传入