vue实现继承
Vue 组件继承的实现方法
Vue 本身不直接支持传统面向对象的继承机制，但可以通过以下几种方式实现类似功能：
使用 mixins 共享逻辑
Mixins 是 Vue 提供的一种代码复用机制，允许将组件选项混入到多个组件中：
// 基础 mixin
const baseMixin = {
data() {
return { baseData: '共享数据' }
},
methods: {
baseMethod() {
console.log('共享方法')
}
}
}
// 子组件
Vue.component('child-component', {
mixins: [baseMixin],
data() {
return { childData: '子组件数据' }
}
})使用 extends 扩展组件
Vue 提供了 extends 选项来创建组件继承关系：
// 基础组件
const BaseComponent = {
template: '<div>Base: {{message}}</div>',
data() {
return { message: '基类消息' }
}
}
// 派生组件
const DerivedComponent = {
extends: BaseComponent,
data() {
return {
message: '派生消息',
extra: '额外数据'
}
}
}使用高阶组件(HOC)
通过函数返回新组件的方式实现组合式继承：
function withBase(WrappedComponent) {
return {
data() {
return { baseProp: '基础属性' }
},
render(h) {
return h(WrappedComponent, {
props: {
...this.$props,
baseProp: this.baseProp
}
})
}
}
}使用 Composition API
Vue 3 的 Composition API 提供了更灵活的代码复用方式：
// 基础逻辑
function useBase() {
const baseValue = ref('基础值')
const baseMethod = () => console.log('基础方法')
return { baseValue, baseMethod }
}
// 组件使用
export default {
setup() {
const { baseValue, baseMethod } = useBase()
const localValue = ref('局部值')
return { baseValue, baseMethod, localValue }
}
}注意事项
- 混入的属性会以组件自身选项优先
- 生命周期钩子会按混入顺序依次调用
- 对于模板继承，可以使用 slot 插槽机制
- Vue 3 推荐使用 Composition API 替代混入
- 深度继承可能导致组件关系难以维护
