什么样的内容需要封装

一段代码在项目中出现两次就开始考虑是否应该进行封装，出现三次就肯定要封装，大到一个页面，一个组件，小到一个function和一个css样式

封装原则

封装出来的组件必须具有高性能，低耦合的特性，主要从以下几点入手：

1.数据从父组件传入

子组件本身不要生成数据，如果需要生成数据，只能在组件内部进行使用，不要传递出去。

父组件对子组件进行传参，使用props。代码如下：

  1. // 父组件向子组件传值
  2. props: {
  3.   // 表格显示的数据
  4.   tableData: {
  5.     type: Array,
  6.     default: function() {
  7.       return [];
  8.     }
  9.   },
  10.   // 表格的操作
  11.   tableOption: {
  12.     type: Array,
  13.     default: function() {
  14.       return [];
  15.     }
  16.   },
  17.   // 控制操作列是否显示
  18.   isOperate: {
  19.     type: Boolean,
  20.     default: function() {
  21.       return false;
  22.     }
  23.   }
  24. }

对于通过props传入的参数，不建议对其进行操作，因为会同时修改父组件里面的数据（如果修改的话，控制台中也会报错的），如果需要修改数据，可以传递给父组件，让父组件去修改（在父组件中处理事件）

2.在父组件中处理事件

父组件中处理的事件是和后端交互的事件，比如发起的axios的请求，单并不是所有的事件都放到父组件中处理，比如组件内部的一些交互行为，或者处理的数据只在组件内部传递，就可以在子组件中处理

  1. // 子组件中
  2. changeApproval(id) {
  3.   this.$emit("pushId", id);
  4. }
  6. // 父组件中
  7. <common-dialog @pushId="getId"></common-dialog>
  9. getId(id) {
  10.   this.approvalForm.approval = id;
  11. }

3.记得留一个slot

一个通用的组件，往往不能完美的适应所有的应用场景，所以在封装组件的时候，只需要完成组件的80%的功能，剩下的20%让父组件通过slot解决

  1. <!-- 子组件 表格操作列 -->
  2. <el-table-column label="操作" v-if="isOperate" min-width="150px">
  3.   <template slot-scope="scope">
  4.     <slot name="operate" :row="scope.row"></slot>
  5.   </template>
  6. </el-table-column>
  1. !-- 父组件 填充表格操作列 -->
  2. <common-table :tableData="tableData" :tableOption.sync="tableOption" :isOperate="isOperate">
  3.   <!-- 操作列，填充operate的插槽 -->
  4.   <template slot="operate" slot-scope="scope">
  5.     <!-- 具体要显示的按钮可以在这里自定义 -->
  6.     <el-button type="primary" size="mini">查看</el-button>
  7.   </template>
  8. </common-table>

4.不要依赖vuex

如果要抽离组件尽量不要使用vuex来实现参数的传递，因为vuex是用来管理组件状态的，虽然可以用来传参，但是不推荐

5.合理使用scoped

样式中添加scoped可以让样式只对当前组件生效，但是一味使用scoped，会产生重复代码，所以需要有一个全局的样式，组件内只写针对于组件的样式

6.组件具有单一职责

封装业务组件或者基础组件，如果不能给这个组件起一个有意义的名字，证明这个组件承担的职责可能不够单一，需要继续抽组件