Vue2 Extends 继承机制与组件复用实践

extends在某些场景下依然发挥作用，如Options API。子组件将继承父组件的属性、方法、生命周期钩子函数以及混合（mixins）等选项。

注意：子组件可以覆盖、或继承扩展父组件的选项。子组件的生命周期钩子和父组件的钩子一起执行。

<!-- BaseComponent.vue -->
<template>
  <div class="base-component">
    <h3>Base Component</h3>
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      commonData: 'This comes from base component',
    };
  },
  methods: {
    baseMethod() {
      console.log('Executing base method');
    },
  },
};
</script>

<!-- DerivedComponent.vue -->
<script>
import BaseComponent from './BaseComponent.vue';

export default Vue.extend({
  extends: BaseComponent,
  data() {
    return {
      // 继承并扩展数据属性
      derivedData: 'This comes from derived component',
    };
  },
  methods: {
    // 继承并扩展方法
    derivedMethod() {
      this.baseMethod(); // 调用父组件的方法
      console.log('Executing derived method');
    },
  },
  mounted() {
    // 继承并扩展生命周期钩子
    console.log('Derived component mounted');
  },
});
</script>

<template>
  <!-- 可以重写或补充父组件的模板 -->
  <div class="derived-component">
    <h4>Derived Component</h4>
    <p>{{ commonData }}</p>
    <p>{{ derivedData }}</p>
    <button @click="derivedMethod">Click me</button>
  </div>
</template>

扩展：

Vue 3 中最常用的继承方式是通过组件组合（Composition API）和插槽（Slots）实现，使用解耦原则，而不是传统的类继承。

 引用：Vue.js 中的 Extends 继承机制与组件复用实践_vue extends-CSDN博客