vue3实现继承
在Vue 3中实现组件继承可以通过组合式API或选项式API完成，以下是具体实现方法：
使用组合式API继承逻辑
通过setup()函数复用逻辑，结合provide/inject或自定义hooks：
// 父组件逻辑 (base.js)
import { ref, provide } from 'vue'
export function useBaseLogic() {
const count = ref(0)
const increment = () => count.value++
provide('baseData', { count, increment })
return { count, increment }
}
// 子组件
import { inject } from 'vue'
const { count, increment } = inject('baseData')使用选项式API继承
通过extends属性直接继承组件选项：
// 基础组件 (BaseComponent.vue)
export default {
data() {
return { baseValue: '继承属性' }
},
methods: {
baseMethod() {
console.log('基础方法')
}
}
}
// 子组件
import BaseComponent from './BaseComponent.vue'
export default {
extends: BaseComponent,
methods: {
childMethod() {
this.baseMethod() // 调用继承方法
}
}
}使用渲染函数继承
通过h()函数组合模板：
import { h } from 'vue'
const BaseComponent = {
render() {
return h('div', this.$slots.default())
}
}
export default {
extends: BaseComponent,
render() {
return h('div', [
h('p', '新增内容'),
super.render() // 调用父级渲染
])
}
}通过mixins复用
虽然Vue 3推荐使用Composition API，但mixins仍可用：
const baseMixin = {
created() {
console.log('混入生命周期')
}
}
export default {
mixins: [baseMixin],
created() {
console.log('组件生命周期') // 执行顺序：混入先于组件
}
}注意事项
- 组合式API更适合逻辑复用，选项式API的
extends主要处理模板继承 - 避免多重继承导致代码难以维护
- 使用TypeScript时需注意类型推导，可通过泛型组件增强类型支持
每种方式适用于不同场景，组合式API的hooks模式是Vue 3推荐的主要继承方案。
