vue3——自己封装按钮组件

---

前言

用elementUI组件库虽然很舒服，不知道各位有没有好奇它其中的el-button是如何封装的呢？今天就一起来看看如何封装自己的按钮组件吧~

---

一、封装的意义

• 项目中按钮风格的统一
• 代码的复用性，可维护性高

二、如何封装？

用到的地方很多，封装为全局组件。还是和之前一样，放在src/components目录下

1. 封装

src/components下新建my-button.vue文件

代码如下（示例）：

<template>
  <button class="my-button ellipsis" :class="[size, type]">
    <slot />
  </button>
</template>
<script>
export default {
   
  name: 'MyButton',
  props: {
   
    size: {
   
      type: String,
      default: 'middle'
    },
    type: {
   
      type: String,
      default: 'default'
    }
  }
}
</script>
<style scoped lang="less">
.my-button