关于vue.js:vue高阶组件

高阶组件就是 一个函数承受一个纯对象，并且返回一个新纯对象
高阶组件：console.js

function Console (Base) {  return {    mounted () {      console.log('haha')    },    props: Base.props,    render (h) {      const slots = Object.keys(this.$slots)        .reduce((arr, key) => arr.concat(this.$slots[key]), [])        // 手动更正 context        .map(vnode => {          vnode.context = this._self //绑定到高阶组件上          return vnode        })       return h(WrappedComponent, {        on: this.$listeners,        props: this.$props,        attrs: this.$attrs      }, slots)    }  }}

高阶组件应用：

<template>  <div>    <span @click="handleClick">props: {{test}}</span>    <slot name="slot1"/> <!-- 具名插槽 --></slot>    <p>===========</p>    <slot><slot/> <!-- 默认插槽 -->  </div></template> <script>export default {  ...}</script><template>  <div>    <Base>      <h2 slot="slot1">BaseComponent slot</h2>      <p>default slot</p>    </Base>    <wrapBase>      <h2 slot="slot1">EnhancedComponent slot</h2>      <p>default slot</p>    </wrapBase>  </div></template> <script>  import Base from './Base.vue'  import hoc from './Console.js'   const wrapBase = Console(Base)   export default {    components: {      Base,      wrapBase    }  }</script>