当前位置：首页 > VUE

vue3实现继承

2026-03-06 16:15:17VUE

Vue 3 实现继承的方法

在 Vue 3 中实现组件或逻辑的继承可以通过多种方式实现，以下是常见的几种方法：

使用 `extends` 选项

Vue 3 的组件选项支持 extends，可以直接继承另一个组件的选项（如 data、methods 等）。这种方式适合基于已有组件扩展新功能。

// 基组件
const BaseComponent = {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};

// 继承基组件
const ChildComponent = {
  extends: BaseComponent,
  methods: {
    decrement() {
      this.count--;
    },
  },
};

组合式 API 复用逻辑

通过组合式 API（setup）可以将逻辑抽离为可复用的函数，实现类似继承的效果。使用 ref、reactive 和生命周期钩子实现逻辑共享。

// 基逻辑
function useCounter() {
  const count = ref(0);
  const increment = () => count.value++;
  return { count, increment };
}

// 子组件复用逻辑
const ChildComponent = {
  setup() {
    const { count, increment } = useCounter();
    const decrement = () => count.value--;
    return { count, increment, decrement };
  },
};

使用 Mixins（不推荐）

Vue 3 仍支持 Mixins，但官方推荐使用组合式 API。Mixins 会将选项合并到组件中，可能导致命名冲突。

const myMixin = {
  data() {
    return { mixinData: 'Hello' };
  },
};

const Component = {
  mixins: [myMixin],
  data() {
    return { localData: 'World' };
  },
};

通过 Provide/Inject 跨层级共享

父组件通过 provide 提供数据或方法，子组件通过 inject 注入依赖，实现跨层级的“继承”。

// 父组件
const ParentComponent = {
  provide() {
    return { sharedMethod: this.sharedMethod };
  },
  methods: {
    sharedMethod() {
      console.log('Shared method called');
    },
  },
};

// 子组件
const ChildComponent = {
  inject: ['sharedMethod'],
  created() {
    this.sharedMethod(); // 调用父组件方法
  },
};

类继承（结合 TypeScript）

如果使用 TypeScript，可以通过类继承实现更传统的 OOP 风格。需配合 @Component 装饰器（需安装 vue-class-component）。

vue3实现继承

import { Vue } from 'vue-class-component';

// 基类
class BaseClass extends Vue {
  baseMethod() {
    console.log('Base method');
  }
}

// 子类继承
@Component
class ChildClass extends BaseClass {
  childMethod() {
    this.baseMethod(); // 调用基类方法
  }
}