高阶组件

高阶组件（HOC）是增强组件功能的模式。

基本概念

function withLogging(WrappedComponent) {
  return {
    mounted() {
      console.log('组件挂载')
    },
    render() {
      return h(WrappedComponent, this.$attrs)
    }
  }
}

使用

import MyButton from './MyButton.vue'

const EnhancedButton = withLogging(MyButton)

传递属性和事件

function withExtraProps(WrappedComponent) {
  return {
    props: {
      extraProp: String
    },
    render() {
      return h(WrappedComponent, {
        ...this.$attrs,
        extraProp: this.extraProp
      })
    }
  }
}

Vue 3 中 Composition API 和组合函数（Composables）是更推荐的代码复用方式。

对比

要点总结

• HOC 是接收组件返回新组件的函数
• 通过 h() 函数渲染包装的组件
• 需正确传递属性和事件
• Vue 3 推荐使用 Composables 替代