高阶组件

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

基本概念

JavaScript

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

使用

JavaScript

import MyButton from './MyButton.vue'

const EnhancedButton = withLogging(MyButton)

传递属性和事件

JavaScript

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

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

对比

方式	适用场景
HOC	跨组件添加通用逻辑
Mixin	组件选项复用（Vue 2）
Composables	Composition API 逻辑复用

要点总结

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

📝 发现内容有误？点击此处直接编辑