1.高阶组件的定义
何谓高阶组件？类比高阶函数的定义：将函数作为参数的函数就是高阶函数，那么，将组件作为参数的组件就是高阶组件。
- 高阶组件是一个函数，它将一个组件作为参数并返回新创建的组件。返回的组件通常使用HOC（高阶组件）提供的功能进行扩充。
- 高阶组件不是可以抓取和安装的软件，而是一种可以帮助编写可重用和可维护代码的技术方案。
2.目标
假如我们有一个组件，我们希望通过某个函数，去扩展它，得到一个新的组件，新的组件有完全的参数组件的行为，如果这点可以满足，那么其他扩展就可以针对性的进行处理了。组件最重要的三个功能就是事件、属性以及插槽，通过函数得到新的组件如果能完全复制参数组件的这三项能力，那么这个函数就是一个合格的高阶组件。
3.思路
通过组件的render函数基于参数组件的模板进行属性、事件乃至插槽的捆绑
4.例子
// 一个函数就是一个组件。所以组件是函数这个命题成立了。所谓高阶组件其实就是一个高阶函数, 即返回一个组件函数的函数
// 回忆高阶组件的定义：接收一个组件作为参数，返回一个新的组件
// Vue中组件就是个函数，但是在引入之前仍只是一个options对象，所以这样就很好明白了 Vue中组件开始只是一个对象，即高阶组件就是：一个函数接受一个纯对象，并且返回一个新纯对象
// 1.高阶组件(HOC)应该是无副作用的纯函数，且不应该修改原组件,即原组件不能有变动
// 2.高阶组件(HOC)不关心你传递的数据(props)是什么，并且新生成组件不关心数据来源
// 3.高阶组件(HOC)接收到的 props 应该透传给被包装组件即直接将原组件prop传给包装组件
// 4.高阶组件完全可以添加、删除、修改 props
export default function Console(BaseComponent) {
return {
props: BaseComponent.props,
mounted() {
console.log("高阶组件");
},
render(h) {
console.log(this);
// 将 this.$slots 格式化为数组，因为 h 函数第三个参数是子节点，是一个数组
const slots = Object.keys(this.$slots)
.reduce((arr, key) => arr.concat(this.$slots[key]), [])
.map((vnode) => {
vnode.context = this._self; // 绑定到高阶组件上，vm：解决具名插槽被作为默认插槽进行渲染
return vnode;
});
// 透传props、透传事件、透传slots
return h(
BaseComponent,
{
on: this.$listeners,
attrs: this.$attrs, // attrs 指的是那些没有被声明为 props 的属性
props: this.$props,
},
slots
);
},
};
}
import Base from "@/components/Base.vue";
import Console from "@/hoc/Console.js";
const wrapBase = Console(Base);
Vue.component("wrap-base", wrapBase);
