vue3实现继承
Vue 3 实现继承的方法
在 Vue 3 中，可以通过组合式 API（Composition API）或选项式 API（Options API）实现组件继承。以下是几种常见方法：
使用组合式 API 实现逻辑复用
组合式 API 通过 setup 函数和自定义 hook 实现逻辑复用，而非传统继承：
// 基础逻辑（父逻辑）
const useBaseFeature = () => {
const count = ref(0)
const increment = () => count.value++
return { count, increment }
}
// 子组件逻辑
const useChildFeature = () => {
const { count, increment } = useBaseFeature()
const double = computed(() => count.value * 2)
return { count, increment, double }
}使用选项式 API 实现继承
通过 extends 选项或混入（mixins）实现传统继承模式：
// 基础组件
const BaseComponent = {
data() {
return { count: 0 }
},
methods: {
increment() {
this.count++
}
}
}
// 子组件继承
const ChildComponent = {
extends: BaseComponent,
computed: {
double() {
return this.count * 2
}
}
}使用 provide/inject 实现跨层级数据传递
适合深层嵌套组件的"伪继承"场景：
// 祖先组件
const Ancestor = {
provide() {
return { sharedData: 'inherited value' }
}
}
// 后代组件
const Descendant = {
inject: ['sharedData'],
template: `<div>{{ sharedData }}</div>`
}注意事项
- 组合式 API 优先于传统继承模式，更符合 Vue 3 的设计理念
- 避免深层继承链，推荐扁平化的组件关系
- 对于 UI 复用，考虑使用插槽（slots）而非继承
- 类型安全场景下，组合式 API 配合 TypeScript 更有优势
