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博客