vue 创建两个类 父类做加法乘法运算 子类做加法乘法 继承父类 和减法运算

在Vue.js中，虽然它是前端框架，但它本身并不支持纯面向对象的继承机制，因为 Vue 是基于组件化开发的。然而，我们可以使用JavaScript的原型链来模拟类似的行为。这里举一个简单的例子，假设我们创建了一个名为`MathOperator`的父类，包含加法(`add`)和乘法(`multiply`)的方法：

// MathOperator.js (假设在一个Vue项目中的文件)
class MathOperator {
  add(a, b) {
    return a + b;
  }

  multiply(a, b) {
    return a * b;
  }
}

然后我们创建一个子类`ChildMathOperator`，在这个子类中，我们添加了减法(`subtract`)方法，并覆盖了父类的部分方法：

class ChildMathOperator extends MathOperator {
  subtract(a, b) {
    return a - b;
  }

  // 如果需要，也可以选择只重写部分方法，比如：
  // multiply(a, b) { return super.multiply(a, b) * 0.5; } // 仅将乘法结果变为原来的一半
}

这样，`ChildMathOperator`继承了`MathOperator`的加法和乘法操作，并添加了自己的减法功能。在Vue组件里，你可以实例化这两个类并调用它们的方法：

export default {
  data() {
    return {
      parentOperator: new MathOperator(),
      childOperator: new ChildMathOperator(),
    };
  },
  methods: {
    performOperation(operationType) {
      const arg1 = 5;
      const arg2 = 3;
      
      if (operationType === 'add') {
        console.log(`${this.parentOperator.add(arg1, arg2)} (Parent)`);
        console.log(`${this.childOperator.add(arg1, arg2)} (Child)`);
      } else if (operationType === 'subtract') {
        console.log(`${this.childOperator.subtract(arg1, arg2)} (Child Only)`);
      }
    }
  }
};

当你调用`performOperation`方法时，可以根据传入的操作类型来演示父类和子类的不同行为。