聊一聊 Vue 里的组件

前言

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

通用组件库

指开源的组件库，如 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，只须要保证传进来和传出去的参数正确，就很容易定位到问题

最后

无论怎么说，在开发的时候，尽可能把公共的东西抽离，都是一个很是棒的选择。各位对组件还有什么其它见解呢？欢迎讨论(￣▽￣)"。