Javascript Vue.js继承调用父方法

是否可以在Vue.js中使用方法重写

var SomeClassA = Vue.extend({
    methods: {
        someFunction: function () {
            // ClassA some stuff
        }
    }
});

var SomeClassB = SomeClassA.extend({
   methods: {
       someFunction: function () {
           // CALL SomeClassA.someFunction
       }
   }
});

---

我想从ClassB someFunction调用ClassA someFunction。甚至可能吗？

不，vue不适用于直接继承模型。据我所知，你不能扩展组件。它的亲子关系主要通过道具和活动来运作

但是，有三种解决方案：

1。传球道具（亲子）

在SomeComponentA的模板中：

<some-component-b someFunctionParent="someFunction"></some-component-b>

3。呼叫家长道具（亲子，丑陋）

---

如果有人对JustWorksTM解决方案感兴趣：

var FooComponent = {
  template: '<button @click="fooMethod()" v-text="buttonLabel"></button>',

  data: function () {
   return {
     foo: 1,
     bar: 'lorem',
     buttonLabel: 'Click me',
   }
  },

  methods: {
    fooMethod: function () {
      alert('called from FooComponent');
    },
    
    barMethod: function () {
      alert('called from FooComponent');
    },
  }
}

var FooComponentSpecialised = {
  extends: FooComponent,

  data: function () {
   return {
     buttonLabel: 'Specialised click me',
     zar: 'ipsum',
   }
  },

  methods: {
    fooMethod: function () {
      FooComponent.methods.fooMethod.call(this);
    
      alert('called from FooComponentSpecialised');
    },
  }
}

---

如果有人要求解决方案，这里是我的，效果很好：

var SomeClassA = {
    methods: {
        someFunction: function () {
            this.defaultSomeFunction();
        },
        // defaultSomeFunction acts like parent.someFunction() so call it in inheritance
        defaultSomeFunction: function () {
            // ClassA some stuff
        },
    },
};

var SomeClassB = {
    extends: SomeClassA,
    methods: {
        someFunction: function () {
            // Replace the wanted SomeClassA::someFunction()
            this.defaultSomeFunction();
            // Add custom code here
        },
    },
};

---

使用juste

extends

from替换了

Vue.extends（）

1的用法。当谈到最后的手段时，这是一个非常好的解决方案，但它的可扩展性不强。2.我曾考虑过在这里使用mixin，但更改函数名的必要性也不可扩展。3.你能让它工作吗。如果这是真的，这将是最好的选择：）我真的不建议使用#3，我只把它作为参考。另外两个对于vue来说更为惯用（继承通常没有太大意义，因为componentA不是抽象类，而是DOM中的父组件，其职责与componentB不同）。如果你少考虑可扩展性而多考虑组件责任，这可能会有所帮助。你不能使用#3，因为它不起作用：）我不能同意，因为componentA不是抽象类，而是DOM中的父组件，与componentB有不同的责任，因为我缺少命名类，它应该是

SomeAbstractComponentA

。我是从Ember来到Vue的，在我看来，组件中的继承并没有什么错。而且，您使用Vue的示例也不正确。您不应该对组件调用

new

。我会准备一个例子。。。这不是余烬；）当然，这把小提琴只是为了证明#3选项不起作用。我正在模板中实例化组件。我不知道这篇文章之后是否有什么变化，但我需要

foomponent.options.methods.foommethod.call（this）
// In someComponentB's 'someFunction':
this.$parent.$options.methods.someFunction(...);

var FooComponent = {
  template: '<button @click="fooMethod()" v-text="buttonLabel"></button>',

  data: function () {
   return {
     foo: 1,
     bar: 'lorem',
     buttonLabel: 'Click me',
   }
  },

  methods: {
    fooMethod: function () {
      alert('called from FooComponent');
    },
    
    barMethod: function () {
      alert('called from FooComponent');
    },
  }
}

var FooComponentSpecialised = {
  extends: FooComponent,

  data: function () {
   return {
     buttonLabel: 'Specialised click me',
     zar: 'ipsum',
   }
  },

  methods: {
    fooMethod: function () {
      FooComponent.methods.fooMethod.call(this);
    
      alert('called from FooComponentSpecialised');
    },
  }
}

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

console.log(new Food('cheese', 5).name);
// expected output: "cheese"

var SomeClassA = {
    methods: {
        someFunction: function () {
            this.defaultSomeFunction();
        },
        // defaultSomeFunction acts like parent.someFunction() so call it in inheritance
        defaultSomeFunction: function () {
            // ClassA some stuff
        },
    },
};

var SomeClassB = {
    extends: SomeClassA,
    methods: {
        someFunction: function () {
            // Replace the wanted SomeClassA::someFunction()
            this.defaultSomeFunction();
            // Add custom code here
        },
    },
};