当前位置：首页 > VUE

vue实现继承

2026-01-13 05:29:15VUE

Vue 组件继承的实现方式

在 Vue 中实现组件继承可以通过以下几种方法：

使用 mixins

Mixins 是一种分发 Vue 组件中可复用功能的灵活方式。一个 mixin 对象可以包含任意组件选项，组件使用 mixin 时，所有 mixin 的选项将被混入该组件本身的选项。

// 定义 mixin
const myMixin = {
  created() {
    this.hello()
  },
  methods: {
    hello() {
      console.log('hello from mixin!')
    }
  }
}

// 使用 mixin
Vue.component('child-component', {
  mixins: [myMixin],
  template: '<div>Child Component</div>'
})

使用 extends

Vue 提供了 extends 选项，允许声明式地扩展另一个组件。

// 基础组件
const BaseComponent = {
  template: '<div>Base Component</div>',
  methods: {
    baseMethod() {
      console.log('base method')
    }
  }
}

// 扩展组件
Vue.component('child-component', {
  extends: BaseComponent,
  template: '<div>Child Component</div>',
  methods: {
    childMethod() {
      this.baseMethod()
      console.log('child method')
    }
  }
})

使用高阶组件（HOC）

通过函数式组件和渲染函数可以创建高阶组件，实现对基础组件的包装和扩展。

function withEnhanced(Component) {
  return {
    render(h) {
      return h(Component, {
        props: this.$props,
        on: {
          ...this.$listeners,
          customEvent: this.handleCustomEvent
        }
      })
    },
    methods: {
      handleCustomEvent(payload) {
        console.log('Enhanced event handling', payload)
      }
    }
  }
}

const EnhancedComponent = withEnhanced(BaseComponent)

使用 Composition API

在 Vue 3 中，可以使用 Composition API 更好地实现代码复用。

vue实现继承

// 基础逻辑
function useBaseFeature() {
  const baseValue = ref(0)
  const increment = () => {
    baseValue.value++
  }
  return { baseValue, increment }
}

// 子组件
export default {
  setup() {
    const { baseValue, increment } = useBaseFeature()
    const childValue = ref(10)

    return { baseValue, increment, childValue }
  }
}