vue实现高阶组件
Vue 高阶组件实现方法
高阶组件（HOC）在 Vue 中是通过函数返回组件的方式实现的，主要用于逻辑复用和组件增强。以下是几种常见的实现方式：
使用 render 函数
通过函数返回一个包含扩展逻辑的组件对象，利用 render 函数动态渲染：
function withLoading(WrappedComponent) {
return {
data() {
return { isLoading: false }
},
render(h) {
return h(WrappedComponent, {
props: {
...this.$props,
loading: this.isLoading
}
})
}
}
}使用 mixins
通过 mixin 混入公共逻辑，适合简单场景：
const withLogMixin = {
mounted() {
console.log('Component mounted:', this.$options.name)
}
}
export default {
mixins: [withLogMixin]
}使用插槽
通过作用域插槽实现逻辑控制，保留模板灵活性：
const WithToggle = {
data() {
return { isOn: false }
},
render(h) {
return this.$scopedSlots.default({
isOn: this.isOn,
toggle: () => { this.isOn = !this.isOn }
})
}
}使用 provide/inject
通过依赖注入实现跨层级组件通信：
const withTheme = {
provide() {
return { theme: this.theme }
},
data() {
return { theme: 'dark' }
}
}
const ThemedButton = {
inject: ['theme'],
template: `<button :class="theme">Submit</button>`
}组合式 API 实现
Vue 3 中使用 setup 函数更灵活地组合逻辑：
import { ref } from 'vue'
export function withCounter(Component) {
return {
setup(props) {
const count = ref(0)
const increment = () => count.value++
return () => (
<Component
{...props}
count={count.value}
onIncrement={increment}
/>
)
}
}
}注意事项
- 正确传递 props 和事件，避免属性丢失
- 处理 ref 引用时使用
$refs转发 - 命名冲突时使用自定义合并策略
- 在 Vue 3 中优先考虑组合式 API 实现
以上方法可根据具体场景选择，组合式 API 提供了更灵活的逻辑复用能力，适合现代 Vue 项目开发。
