Vue通用组件封装方式

vue项目中通常会使用elementUI作为UI组件库，在研读了一些elementUI的源码后，大受启发，所以在此基础上记录一下组件封装的方式。

HOC高阶函数组件封装

不知道你有没有意识到，在一个项目中使用组件库时，某些组件需要固定的样式，以保持风格统一。这就有个问题，我们每次都要传递相同的props或者改写样式，而且一不小心就遗漏了边边角角。这时，基于框架库的二次封装就有了用武之地。二次封装最好保持原有框架的属性方法，降低学习成本。

HOC高阶函数非常适合用于这些场景的二次封装，它的原理就是在原有的组件上嵌套一层函数，对原有组件进行加工后返回新组件。关于渲染函数的知识可以查看官网文档：渲染函数 & JSX

以el-table组件为例，我想要有边框、带斑马纹、固定高度的表格，我需要设置border=true,stripe=true,maxHeight=800这三个属性，同时我也想要将表头字体颜色修改。

示例一:改造el-table组件

<script>
export default {
	name: 'MyTable',
	functional: true,
	props: {	// 设置props默认值是为了固定我的需求，同时不影响原有组件自定义
		border: {
			type: Boolean,
			default: true
		},
		stripe: {
			type: Boolean,
			default: true
		},
		maxHeig