什么样的内容需要封装

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

封装原则

以下将封装出来的通用组件叫做子组件，引用通用组件的界面叫做父组件。

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

1.数据从父组件传入

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

父组件使用props对子组件进行传参：

// 父组件向子组件传值
props: {
  // 表格显示的数据
  tableData: {
    type: Array,
    default: function() {
      return [];
    }
  },
  // 表格的操作
  tableOption: {
    type: Array,
    default: function() {
      return [];
    }
  },
  // 控制操作列是否显示
  isOperate: {
    type: Boolean,
    default: function() {
      return false;
    }
  }
}

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

直通门：Vue组件传值，你真的都清楚了吗？

2.在父组件中处理事件

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

// 子组件中
changeApproval(id) {
  this.$emit("pushId", id);
}

// 父组件中
<common-dialog @pushId="getId"></common-dialog>

getId(id) {
  this.approvalForm.approval = id;
}

3.记得留一个slot

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

<!-- 子组件 表格操作列 并不能确定表格是否有操作列，且也不能确定操作列都有什么按钮 -->
<el-table-column label="操作" v-if="isOperate" min-width="150px">
  <template slot-scope="scope">
    <slot name="operate" :row="scope.row"></slot>
  </template>
</el-table-column>

!-- 父组件 填充表格操作列 -->
<common-table :tableData="tableData" :tableOption.sync="tableOption" :isOperate="isOperate">
  <!-- 操作列，填充operate的插槽 -->
  <template slot="operate" slot-scope="scope">
    <!-- 具体要显示的按钮可以在这里自定义 -->
    <el-button type="primary" size="mini">查看</el-button>
  </template>
</common-table>