聊一聊 Vue 里的组件

前言

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

通用组件库

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

加分项：

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

业务组件

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

<template>
    <SelectTable
      ref="selectTable"
      url="/select/table"
      :columns="columns">
    </SelectTable>
</template>

<script>
import SelectTable from '~/SelectTable'
export default {
  components: {
    SelectTable
  },
  data() {
    return {
      columns: [{
        title: '姓名',
        key: 'name'
      }, {
        title: '年龄',
        key: 'age'
      }, {
        title: '身高',
        key: 'height',
        filter: (value) => value + 'cm'
      }, {
        title: '性别',
        key: 'sex',
        filter: (value) => value === 0 ? '女' : '男'
      }, {
        title: '地址',
        key: 'address',
        width: 400,
        render: (h, param) => {
          return <el-button size="small">{param.row.address}</el-button>
        }
      }]
    }
  }
}
</script>

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

加分项：

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

减分项：

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

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

页面组件

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

加分项：

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

最后

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