聊一聊 Vue 里的组件

前言

在开发 Vue 项目时，大多数人会选择用官方的 vue-cli 搭建项目的基础。大家也都会使用一些组件库，比如 element-ui，或者自己封装一些组件。那么在日常开发时，大家都会封装哪些组件呢?
我的话会这样分：
1、公共组件
    1-1、通用组件库（如  element-ui、iView）
    1-2、业务组建（只能在这个项目使用）
2、页面组建（为了拆分复杂度而使用）

通用组件库

指开源的组件库，如 element-ui、iView，都有 table、popover、datepicker 这些常用的组件，使用起来开发快多了。

加分项：

1. 样式统一风格，很美观
2. 大而全，不必每个组件都再去单独找，还担心样式不统一
3. 稳定，组件库有足够多的测试用例，来保证结果是正确的

业务组件

在实际项目开发中，即便使用了组件库，仍然有大量重复的代码，其实我们可以更加精简的去开发，基于通用组件或者其它业务组件之上，再封装一层，让其更加方便的使用。比如在后台管理系统中，经常会有 表格 + 分页 这样的组合，完全可以组合封装起来。下面看个例子：

上面的代码只有 表格 + 分页 的代码，我们只需要指定少量的配置，就可以生成一个想要的页面。
只需要指定 url (后端的接口地址) 和 columns 就可以实现一个表格，而且还带分页。图片的源码地址

加分项：

1. 方便使用，只需要少量的配置，就可以生成想要的页面
2. 方便维护，只需要维护组件内部即可
3. 降低使用难度，团队里每个人的水平不一样，水平一般也可以写出蛮复杂的页面，如果你封装的够简单。
4. 代码量少，越少就越不容易失误啦，还不用担心使用者写出难以理解，或者质量不高的代码

减分项：

1. 不通用，有些需要跟好端后端的格式，才好做封装

如果项目里面有多类似的页面，我建议可以做一些封装，否则封装的意义不是很大。

页面组件

在开发复杂的页面的时候，往往会一个页面有很多的代码，看起来头都大了，这时候我们就可以考虑把其中的一些代码，单独分离出去，不至于一个页面上千甚至上万行代码。

加分项：

1. 方便维护，把部分独立的业务分离出去
2. 方便定位 bug，只需要保证传进来和传出去的参数正确，就很容易定位到问题

最后

不管怎么说，在开发的时候，尽量把公共的东西抽离，都是一个非常棒的选择。各位对组件还有什么其它看法呢？欢迎讨论(￣▽￣)"。