当前位置：首页 > VUE

vue实现继承

2026-03-07 12:46:19VUE

Vue 实现继承的方式

在 Vue 中实现继承可以通过多种方式完成，以下是几种常见的方法：

使用 `extends` 选项

Vue 组件可以通过 extends 选项继承另一个组件的选项，包括数据、方法、生命周期钩子等。

// 基类组件
const BaseComponent = {
  data() {
    return {
      baseMessage: 'Hello from BaseComponent'
    }
  },
  methods: {
    baseMethod() {
      console.log(this.baseMessage)
    }
  }
}

// 子类组件
const ChildComponent = {
  extends: BaseComponent,
  data() {
    return {
      childMessage: 'Hello from ChildComponent'
    }
  },
  methods: {
    childMethod() {
      console.log(this.childMessage)
    }
  }
}

使用 Mixins

Mixins 是一种分发 Vue 组件中可复用功能的方式，可以用于实现类似继承的效果。

// 定义一个 mixin
const myMixin = {
  data() {
    return {
      mixinMessage: 'Hello from Mixin'
    }
  },
  methods: {
    mixinMethod() {
      console.log(this.mixinMessage)
    }
  }
}

// 使用 mixin
const ComponentWithMixin = {
  mixins: [myMixin],
  data() {
    return {
      componentMessage: 'Hello from Component'
    }
  },
  methods: {
    componentMethod() {
      console.log(this.componentMessage)
    }
  }
}

使用 Composition API

Vue 3 的 Composition API 提供了更灵活的代码复用方式，可以通过函数组合实现类似继承的效果。

// 基类逻辑
function useBase() {
  const baseMessage = ref('Hello from Base')
  const baseMethod = () => {
    console.log(baseMessage.value)
  }
  return { baseMessage, baseMethod }
}

// 子类组件
export default {
  setup() {
    const { baseMessage, baseMethod } = useBase()
    const childMessage = ref('Hello from Child')
    const childMethod = () => {
      console.log(childMessage.value)
    }
    return { baseMessage, baseMethod, childMessage, childMethod }
  }
}

使用高阶组件

通过函数返回一个组件，可以实现高阶组件模式的继承。

vue实现继承

function withBase(WrappedComponent) {
  return {
    data() {
      return {
        baseData: 'Base data'
      }
    },
    methods: {
      baseMethod() {
        console.log(this.baseData)
      }
    },
    render(h) {
      return h(WrappedComponent, {
        props: this.$props,
        on: this.$listeners,
        scopedSlots: this.$scopedSlots
      })
    }
  }
}

const BaseEnhancedComponent = withBase(OriginalComponent)