需要打包什么样的内容
当一段代码在项目中出现两次的时候elementui封装技巧，就开始考虑是否应该封装它。 如果出现三次，就一定是封装的，大到一个页面、一个组件，小到一个函数、一个css样式。
封装原理
下面将封装的公共组件称为子组件，引用公共组件的接口称为父组件。
封装的组件必须具备高性能、低耦合的特点，主要从以下几点出发：
1.数据从父组件传入
子组件本身不生成数据。 如果需要生成数据，只能在组件内部使用，不能传递出去。
父组件使用 props 向子组件传递参数：
// 父组件向子组件传值
props: {
// 表格显示的数据
tableData: {
type: Array,
default: function() {
return [];
}
},
// 表格的操作
tableOption: {
type: Array,
default: function() {
return [];
}
},
// 控制操作列是否显示
isOperate: {
type: Boolean,
default: function() {
return false;
}
}
}
对于通过props传入的参数，不建议对其进行操作，因为父组件上的数据会同时改变（如果改变了，控件Taipei也会报错）。 如果数据需要改变，可以传递给父组件让父组件改变（在父组件中处理storm）。
穿越之门：Vue组件传值，你真的懂吗？
2.在父组件中处理风暴
父组件中处理的干扰是与前端交互的干扰，比如发起的axios请求，但并不是所有的干扰都在父组件中处理，比如组件内部的一些交互行为，或者处理的数据只是在该组件在内部传递，可以在子组件中处理。
// 子组件中
changeApproval(id) {
this.$emit("pushId", id);
}
// 父组件中
<common-dialog @pushId="getId"></common-dialog>
getId(id) {
this.approvalForm.approval = id;
}
3.记得留槽位
一个通用的组件往往无法完美适应所有的应用场景elementui封装技巧，所以在封装组件时，只需要完成组件80%的功能，剩下的20%应该由父组件通过槽来解决。
<!-- 子组件 表格操作列 并不能确定表格是否有操作列，且也不能确定操作列都有什么按钮 -->
<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>
补充知识点：什么是槽？
插槽是分发内容的套接字。 相当于我在餐厅（子组件）给你占了一个座位，在里面写了operate，然后你就到这里来喝水，如果你是operate，你可以坐这个座位，如果你不是，你可以不要坐这个位置。
简单来说就是将父组件中的内容放到对应的jack的位置
4.不要依赖vuex
如果要提取组件，尽量不要使用vuex来实现参数传递，因为vuex是用来管理组件状态的，虽然可以用来传递参数，而且不推荐，可以选择放在localstorage中，或者通过props等传递。
5.合理使用scope
在样式中添加scoped可以让样式只对当前组件有效，盲目使用scoped会造成重复代码，所以需要全局样式，并且在组件中只写该组件的样式，防止重复样式代码。
6. 组件具有单一职责
封装业务组件或者基础组件。 如果你不能给这个组件起一个有意义的名字，就证明这个组件的职责可能不够单一。 你需要不断地提取组件，直到它可以成为一个独立的组件。
包装结果
为了满足项目的需要，对ElementUI表格进行了重新封装，具体链接可以点击：
直通门：ElementUI对桌子的二次包装
