vue 实现继承关系

在 Vue 中实现继承关系可以通过多种方式完成，主要依赖于 JavaScript 的原型继承或组合式 API 的逻辑复用。以下是几种常见方法：

使用 Mixins 实现逻辑复用

Mixins 是 Vue 2 中常用的代码复用方式，允许将组件的选项混入到其他组件中。

// 基础 Mixin
const baseMixin = {
  data() {
    return { baseData: 'Base Data' };
  },
  methods: {
    baseMethod() {
      console.log(this.baseData);
    }
  }
};

// 子组件
Vue.component('child-component', {
  mixins: [baseMixin],
  data() {
    return { childData: 'Child Data' };
  },
  methods: {
    childMethod() {
      this.baseMethod();
      console.log(this.childData);
    }
  }
});

使用 extends 继承组件选项

Vue 提供了 extends 选项，允许一个组件直接继承另一个组件的选项。

// 基础组件
const BaseComponent = {
  data() {
    return { baseData: 'Base Data' };
  },
  methods: {
    baseMethod() {
      console.log(this.baseData);
    }
  }
};

// 子组件
Vue.component('child-component', {
  extends: BaseComponent,
  methods: {
    childMethod() {
      this.baseMethod();
    }
  }
});

使用 Composition API（Vue 3）

Vue 3 的 Composition API 通过函数式编程实现更灵活的代码复用。

// 基础逻辑
function useBase() {
  const baseData = ref('Base Data');
  const baseMethod = () => {
    console.log(baseData.value);
  };
  return { baseData, baseMethod };
}

// 子组件
setup() {
  const { baseData, baseMethod } = useBase();
  const childData = ref('Child Data');
  const childMethod = () => {
    baseMethod();
    console.log(childData.value);
  };
  return { baseData, baseMethod, childData, childMethod };
}

通过 Provide/Inject 实现跨层级继承

适用于深层嵌套组件间的数据或方法传递。

// 祖先组件
export default {
  provide() {
    return {
      baseMethod: this.baseMethod
    };
  },
  methods: {
    baseMethod() {
      console.log('Base Method');
    }
  }
};

// 后代组件
export default {
  inject: ['baseMethod'],
  methods: {
    childMethod() {
      this.baseMethod();
    }
  }
};

注意事项

• 命名冲突：Mixins 或继承可能导致属性或方法名冲突，需通过命名规范避免。
• 响应性：Composition API 的 ref 或 reactive 需正确处理响应式数据。
• 灵活性：Composition API 更适合复杂逻辑的复用，而 Mixins 适合简单场景。

根据项目需求选择合适的方式，Vue 3 推荐优先使用 Composition API 实现逻辑复用。