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