Vue3 extends 属性（快速上手）

Vue3 extends 属性的核心概念

extends 属性是 Vue3 中实现组件继承的关键语法（约 150 字）
它允许子组件直接复用父组件的选项配置（如 methods、data 等），
类似面向对象编程中的类继承机制。
通过 extends 可以减少重复代码，优化组件结构，
比如多个按钮组件共享基础样式和逻辑时，
只需定义一个基类组件，其他组件通过 extends 继承即可。

基础语法与使用场景

单组件继承

// 定义父组件 Parent.vue
export default {
  data() {
    return { parentMsg: '我是父组件数据' }
  },
  methods: {
    parentMethod() { console.log('父组件方法') }
  }
}

// 子组件 Child.vue 使用 extends
export default {
  extends: Parent,
  data() {
    return { childMsg: '我是子组件数据' }
  },
  methods: {
    childMethod() { console.log('子组件方法') }
  }
}

混入继承

// 混入模块 mixin.js
export const MyMixin = {
  data() { return { mixinData: '来自混入的数据' } },
  methods: { mixinMethod() { console.log('混入方法') } }
}

// 组件中同时使用 extends 和 mixins
export default {
  extends: Parent,
  mixins: [MyMixin],
  created() {
    this.parentMethod() // 调用父组件方法
    this.mixinMethod()   // 调用混入方法
    console.log(this.mixinData) // 访问混入数据
  }
}

进阶特性与组合方式

合并多个继承来源

export default {
  extends: BaseComponent,
  mixins: [FormMixin, ValidationMixin],
  data() {
    // 会合并所有来源的数据
    return {
      localData: '子组件私有数据',
      // 注意：如果 mixin 和父组件有同名字段，父组件会覆盖
    }
  }
}

生命周期合并规则

export default {
  extends: Parent,
  created() {
    // 会先执行父组件 created
    // 再执行子组件 created
    this.parentHook() // 可访问父组件钩子
    this.childHook()  // 可访问子组件钩子
  }
}

实战应用与代码示例

基类组件继承

// 基类组件 BaseButton.vue
export default {
  props: { disabled: Boolean },
  methods: {
    handleClick() {
      if (!this.disabled) {
        this.$emit('click')
      }
    }
  }
}

// 次级组件 PrimaryButton.vue
export default {
  extends: BaseButton,
  props: { primary: Boolean },
  render() {
    return (
      <button class={this.primary ? 'primary' : ''}>
        {this.$slots.default()}
      </button>
    )
  }
}

主题继承方案

// 基础主题组件 ThemeBase.vue
export default {
  data() {
    return {
      themeColor: '#333',
      fontSize: '14px'
    }
  }
}

// 深色主题组件 DarkTheme.vue
export default {
  extends: ThemeBase,
  data() {
    return {
      themeColor: '#1a1a1a', // 覆盖父组件颜色
      backgroundColor: '#222' // 新增背景色配置
    }
  }
}

常见注意事项

1. 属性覆盖陷阱

   • 子组件 extends 父组件时，同名属性会覆盖
   • 推荐使用 key: 'parentKey' 显式声明来源

2. 继承链过深

   • 不建议超过 3 层的 extends 继承
   • 复杂逻辑优先使用 composition API

3. 生命周期冲突

   • 同名生命周期钩子会形成调用链
   • 用 super 明确调用顺序（组合式 API 不适用）