Elementui- Button 源码解析「开始造轮子啦～」

本文链接：https://blog.youkuaiyun.com/weixin_60789461/article/details/124849943

本文详细解析了ElementUI中Button组件的源码，包括DOM结构、属性注册和方法计算属性。重点介绍了DOM结构中的按钮样式、事件处理、禁用与加载状态。同时，文章提到了Vue中的`provide`和`inject`，用于实现跨级组件间的数据传递，解决了孙组件访问祖先组件数据的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Button部分源码包含了三个大的方面。

第一个是DOM结构

DOM结构：

<template>
<!-- 1.按钮样式 -->
<!-- 2.点击事件 -->
<!-- 3.当主动禁用或者loading的时候，都会触发按钮的disabled -->
<!-- 是一个整体，整个括号括起来，还得紧紧的挨着等号 -->
<!-- 4.是否默认聚焦 -->
<!-- 5.Button 原始类型 -->
<!-- class -->
<!-- 最开始的是类名 -->
<!-- 后面的那个是属性 -->
<!-- 
    class里面最先是类型，然后是能否禁用
    然后是风格和形状
 -->
<button
class="el-button"
@click="handleClick"
:disabled="buttonDisabled || loading"
:autofocus="autofocus"
:type="nativeType"
:class="[
    type ? 'el-button--' + type : '',
    buttonSize ? 'el-button--' + buttonSize : '',
    {
        'is-disabled': buttonDisabled,
        'is-loading': loading,
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle
    }
]"
>
<!-- 动画 -->
<!-- 在loading，就出现这个表情 -->
    <i class="el-icon-loading" v-if="loading"></i>
<!-- icon -->
<!-- icon存在，并且loading不存在 -->
    <i class="icon" v-if="icon && ! loading"></i>
    <!-- 插槽 -->
    <span v-if="$slot.default"><slot></slot></span>
  </button>
</template>

里面有较为清晰的注释。

在这里再写一遍

class="el-button" -> 按钮样式

@click="handleClick" -> <