Vue: super() in a method overriden via Vue.extend

Created on 31 May 2016  路  8Comments  路  Source: vuejs/vue

It would be great to have super() method available to be able to call parent implementation.

Most helpful comment

  1. This won't be implemented in Vue.js core because I don't want to endorse deep class inheritance.
  2. You can use this.constructor.super.options.methods.method.call(this) - this is obviously super verbose, but you can easily write a helper to shorten it to something like callSuper(this, 'methodName').

@yyx990803 It's not about deep class inheritance, it's about using "extends" property according to how it's done everywhere and how it is described in the docs. Are you planning to remove "extends" in future releases of vue?

All 8 comments

  1. This won't be implemented in Vue.js core because I don't want to endorse deep class inheritance.
  2. You can use this.constructor.super.options.methods.method.call(this) - this is obviously super verbose, but you can easily write a helper to shorten it to something like callSuper(this, 'methodName').

Hi @softomatix - I wrote vue-super, which might be helpful.

Sorry, to keep answering into a closed thread :-(

I really like to known more about why Vue are not using ES6 classes, besides "I don't want to endorse deep class inheritance".

I agree that "deep inheritance" is not a god thing to encourage, but that is not a really good argument for not using ES6 classes more directly.

Some times ago, You wrote something about static properties that would be a problem in native classes, what else could be a problem, and could there be found a solution ?

Would it be possible to have a Vue.extend type and ES6 class in parallel, to make a more natural integration to both ES6 and Typescript ? As I wrote before, this is the single most strange thing about Vue, and I really like all the rest a lot !

/BL

Ok, that was an interesting read, I understand the reason better now ... So I guess vue-class-component will enable static type checking in ts (I can fake data types in the class declaration), and the rest could be a good idea to reconsider (inheritance in this case).

Fyi, The syntax specified by @yyx990803 does not seem to be valid anymore. this.constructor.super.options does not contain a methods property (using extends: MyComp syntax).

Using MyComp.methods.... instead. Works but not as clean.

  1. This won't be implemented in Vue.js core because I don't want to endorse deep class inheritance.
  2. You can use this.constructor.super.options.methods.method.call(this) - this is obviously super verbose, but you can easily write a helper to shorten it to something like callSuper(this, 'methodName').

@yyx990803 It's not about deep class inheritance, it's about using "extends" property according to how it's done everywhere and how it is described in the docs. Are you planning to remove "extends" in future releases of vue?

Slight modification to @phil294 's MyComp.methods...: I found I needed MyComp.options.methods...

export default {
  name: 'MyComponent',
  extends: OtherComponent,
  methods: {
    foo() {
      let value = OtherComponent.options.methods.foo.call(this);
      // do your thing, modify value, etc
      return value;
    },
  },
};
Was this page helpful?
0 / 5 - 0 ratings