组件的封装，button按钮组件的封装，vue2组件封装，vue3按钮的封装

主题：下面会介绍如何封装vue3 button按钮，如何封装vue2 button按钮，以及如何封装

一：组件的封装并不难，相对来说就是父传子和子传父，下面内容将展现如何封装button按钮组件，其他组件的封装大致相同

这里使用的是vue3封装按钮，所以需要使用到TypeScript，我会简单说明；

      1.所有组件的封装就是接收父组件传递的参数和将数据传递给父组件；

      2.单独创建一个vue文件来装封装的组件，组件里面使用到button按钮和作用域插槽；

      3.按钮的样式和大小通过使用者传递参数来达到相应效果；

      4.这里对类型做了相应的校验，vue3泛型，写法不明白可以去看下typescript官网；

      5.推荐typescript中文官网，良心推荐（TypeScript 与组合式 API | Vue.js）；

二：下面是完整的一个button按钮封装代码，可以借鉴

     1.这里面使用了最简便的泛型写法，vue3默认写法还未确认，个人推荐；

      2.页面使用：<MyButton type="primary" size="large">按钮</MyButton>

<template>
  <button class="my-button" :class="[size, type]">
    <slot></slot>
  </button>
</template>

<script setup lang="ts">
// 泛型的简写，推荐使用-方便，也称为：响应式语法糖
// 这里可以直接给按钮的默认值
const { type = 'default', size = 'small' } = defineProps<{
  size?: 'large' | 'middle' | 'small' | 'mini';
  type?: 'default' | 'primary' | 'plain' | 'gray';
}>();

</script>

<style scoped lang="less">
// 基于类名定义一些和定制样式无关的样式
.my-button {
  appearance: none;
  border: none;
  outline: none;
  background: #fff;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
}
// 大
.large {
  width: 240px;
  height: 50px;
  font-size: 16px;
}
// 中
.middle {
  width: 180px;
  height: 50px;
  font-size: 16px;
}
// 小
.small {
  width: 100px;
  height: 32px;
}
//超小
.mini {
  width: 60px;
  height: 32px;
}
.default {
  border-color: #e4e4e4;
  color: #666;
}
// 确认
.primary {
  border-color: #27ba9b;
  background: #27ba9b;
  color: #fff;
}
// 橙色
.plain {
  border-color: #27ba9b;
  color: #fff;
  background: orange;
}
// 灰色
.gray {
  border-color: #ccc;
  background: #ccc;
  color: #fff;
}
</style>

三：这里介绍下其他两种泛型写法，针对上面button案例延申

<script setup lang="ts">
// 泛型的简写，推荐使用-方便，也称为：响应式语法糖
const { type = 'default', size = 'small' } = defineProps<{
  size?: 'large' | 'middle' | 'small' | 'mini';
  type?: 'default' | 'primary' | 'plain' | 'gray';
}>();

// 这种是普通写法，跟响应式语法糖写法共同
defineProps({
  size: {
    type: String as PropType<'mini' | 'small' | 'middle' | 'large'>,
    default: 'small',
  },
  type: {
    type: String as PropType<'default' | 'primary' | 'plain' | 'gray'>,
    default: 'plain',
  },
});

// 比较少见，了解即可
withDefaults(
  defineProps<{
    type?: 'default' | 'primary' | 'plain' | 'gray';
    size?: 'large' | 'middle' | 'small' | 'mini';
  }>(),
  {
    type: 'gray',
    size: 'mini',
  }
);
</script>

四：vue2 button按钮的封装

      1.相信大家都对vue2有所了解，vue2和3的封装都大致一样，除了传参书写有所改变，思路都是一样的，这里我就直接上代码了；

      2.页面使用：<MyButton type="primary" size="mini">vue2的按钮</MyButton>

       3.这里需要注意vue2组件需要引入并注册再使用；

<template>
  <button class="my-button" :class="[size, type]">
    <slot />
  </button>
</template>

<script>

export default {
  props: {
    type: {
      type: String,
      default: 'default'
    },
    size: {
      type: String,
      default: 'mini'
    }
  }
}
</script>

<style scoped lang="scss">
// 基于类名定义一些和定制样式无关的样式
.my-button {
  appearance: none;
  border: none;
  outline: none;
  background: #fff;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
}

// 大
.large {
  width: 240px;
  height: 50px;
  font-size: 16px;
}

// 中
.middle {
  width: 180px;
  height: 50px;
  font-size: 16px;
}

// 小
.small {
  width: 100px;
  height: 32px;
}

//超小
.mini {
  width: 60px;
  height: 32px;
}

.default {
  border-color: #e4e4e4;
  color: #666;
}

// 确认
.primary {
  border-color: #27ba9b;
  background: #27ba9b;
  color: #fff;
}

// 橙色
.plain {
  border-color: #27ba9b;
  color: #fff;
  background: orange;
}

// 灰色
.gray {
  border-color: #ccc;
  background: #ccc;
  color: #fff;
}
</style>

总结：组件的功能功能封装并没有想的那么难，不管vue2还是vue3，主要需要理清逻辑，为什么要这样做，以上就是简单的vue button按钮的封装，vue3跟vue2相比就增加了一个类型校验等。