vue组件

组件的分类

一般来说，vue.js组件主要分成三类

1. 由vue-router 产生的页面，它本质上也是一个组件，主要承当当前页面的html结构，会包含数据获取，数据整理，数据可视化等常规业务。整个文件相对较大，但一般不会有props选项和自定义事件，因为它作为路由的渲染，不会被复用，因此也不会对外提供接口。
2. 不包含业务，独立，具体功能的基础组件，比如日期选择器，模态框等。这类组件作为项目的基础组件，会被大量使用，因此组件的api进行高强度的抽象，可以通过不同的配置实现不同的功能。
3. 业务组件。他不像第二类独立组件只包含某个功能，而是在业务中被多个页面复用，它与独立组件的别是，业务组件只会在当前项目中会用到，不具有通用性，而且会包含一些业务，比如数据请求，而独立组件不包含任何业务，在任何项目中都可以使用。

组件的细分类

无渲染组件

1. 无渲染组件，即组件只包含逻辑而不需要自己渲染内容，视图的输出通过作用域插槽全权交给父组件。同时由于vue3新增了组合式api,因此推荐纯逻辑复用使用组合式api,同时复用逻辑与视图布局使用无渲染组件

vue组件的具体封装，封装组件需要考虑什么？

Vue的组件API主要包含三部分：

1. prop：表示组件接收的参数，最好用对象的写法，这样可以针对每个属性设置类型、默认值或自定义校验属性的值，此外还可以通过type、validator等方式对输入进行验证 2 .solt:可以给组件动态插入一些内容或组件，是实现高阶组件的重要途经，当需要实现多个插槽时，可以使用具名slot
2. event:是子组件向父组件传递消息的重要途经

封装通用组件必须具备高内聚、低耦合的特征

1. 数据从父组件传入,为了解耦，子组件本身就不能生成数据。即使生成了，也只能在子组件内部运作，不能传递出去。
2. 在父组件处理事件，在组件中，通常会需要各种事件，这些事件的处理方法应当尽量放在父组件中，通用组件本身只作为一个中转站。
3. 子组件至少得留一个插槽，给父组件更高的机动性
4. 不要依赖Vuex，Vuex的设计初衷是用来管理组件状态，当写入数据庞大的state时，会产生数据泄露