开发过程中 Vue 的组件主要分为三类https://blog.csdn.net/weixin_44260504/article/details/89555563
页面组件。由 vue-router 指向的组件，通常是在 router.js 中路由指向的组件。主要承载当前页面的 html 结构，通常还包括数据获取，数据整理，数据可视化等常规的前端业务，整个组件文件较大，但是一般不包括 props 和自定义事件等，因为页面组件作为路由的渲染，一般不可复用，不对外提供接口。
业务组件。通常是在页面组件中引入，针对当前项目，是对页面中某个部分进行拆分出来编写的，具有特定的业务，如获取数据，整理数据等等还可以依赖外部库，如 axios、echarts、vuex 等，业务组件可能会被多个页面复用，也可能只适用某个页面，如果需要复用，需要抽象出一定的外部接口供页面组件调用。
独立组件。不包含业务，具有特定功能的基础组件，比如日期选择器，按钮，模态框等等，作为项目的基础组件，需要对 api 进行高强度的抽象，以通过不同的配置实现不同的功能。比如 element-ui，iView 等，包含了很多基础的 UI 组件。
这类组件的开发最主要的是对 api 的设计和提供的功能进行具体的开发，要保证兼容性和通用性，还有性能，在不依赖外部库的情况下，各组件的通信等等会比较复杂。
组件封装(独立组件)
通过vue-cli搭建的项目，目录下都有components目录，自定义组件一般放在这里。
image.png
编写一个.vue文件和.js文件
index.vue内容如下：
<template>
<div class="test_button">
<button>
hahaha
</button>
</div>
</template>
<script>
export default {
name: 'TestButton' // 注意这里的name命名，就是你以后封装好后使用的组件名
}
</script>
<style lang="scss" scoped>
.test_button {
position: relative;
width: 300px;
height: 300px;
background-color: burlywood;
}
</style>
index.js内容如下：
import TestButton from "./index.vue";
const testButton = {
install: function(Vue) {
// Vue.component()是用来注册全局组件的
Vue.component(TestButton.name, TestButton);
}
};
export default testButton;
image.png
这种方式引入的是全局组件。
- 独立组件的开发最主要的就是对提供的外部接口进行高度抽象，能通过配置实现需要的功能。提供外部接口的方式主要是通过组件之间通信的方式，如props,$emit和自定义事件。这类组件之间代码是完全独立的。
