话不多说，直接上代码

<!--
<template>
  <button :class="classes" @click="onClick">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'Button',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    size: {
      type: String,
      default: 'medium'
    }
  },
  computed: {
    classes() {
      return ['button', `button-${this.type}`, `button-${this.size}`];
    }
  },
  methods: {
    onClick() {
      this.$emit('click');
    }
  }
};
</script>

<style scoped>
.button {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.button-default {
  background-color: #ccc;
  color: #333;
}

.button-primary {
  background-color: #007bff;
  color: #fff;
}

.button-success {
  background-color: #28a745;
  color: #fff;
}

.button-danger {
  background-color: #dc3545;
  color: #fff;
}

.button-small {
  font-size: 12px;
}

.button-medium {
  font-size: 14px;
}

.button-large {
  font-size: 16px;
}
</style>
-->


局部组件的使用方式

<template>
  <div>
    <Button type="primary" size="large" @click="handleClick">Click me</Button>
  </div>
</template>

<script>
import Button from './Button.vue';

export default {
  name: 'App',
  components: {
    Button
  },
  methods: {
    handleClick() {
      alert('Button clicked');
    }
  }
};
</script>
                        


原文代码：https://blog.csdn.net/ACCPluzhiqi/article/details/132092205

1.在模板中，我们使用:class绑定动态类，根据type和size属性来设置按钮的样式类。使用@click绑定点击事件，并使用插槽来允许在按钮中插入自定义内容。

2.在计算属性classes中，我们根据属性值动态生成类名数组。按钮的样式类由button和button- ${this.type}组成，尺寸类由button-$ {this.size}组成。

全局组件和局部组件

##全局组件需要通过vue.component(组件文件）的方式进行全局的租车，这样就可以通过标签的方式进行一个引用
##局部组件只需要引入组件文件，通过组件名的引用就可以完成组件的使用

3.通过暴露出的$emit做业务点击的需求函数处理

4.通过props传参来修改组件的类型

脚手架vue-cli中的组件一般都是要镜像上传的

1.你要去注册一个npm账号

2.创建一个组件

3.发布组件到npm，组件的名称不可与npm库中的组件名称重复

4.通过npm下载到本地，最后通过vue.use全局注册的方式当作一个标签的方式来进行使用

创建一个公用组件的小思路

话不多说，直接上代码