# vue 实现高阶组件 将函数作为参数的函数就是高阶函数，那么，将组件作为参数的组件就是高阶组件 高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。 组件最重要的三个功能就是事件、属性以及插槽； 通过组件的render函数基于参数组件的模板进行属性、事件乃至插槽的捆绑 在不改变对象自身的前提下在程序运行期间动态的给对象添加一些额外的属性或行为 ```js // 高阶组件完全可以添加、删除、修改 props export default function Console(BaseComponent) { return { props: BaseComponent.props, mounted() { console.log("高阶组件"); }, render(h) { // 将 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 ); }, }; } ```