super() in a method overriden via Vue.extend

[cybertino]

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

[yyx990803]

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').

[rpkilby]

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

[druppy]

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

[simplesmiler]

@druppy classes are not awesome.
Also, #2371 (comment) and #2371 (comment).

[druppy]

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).

[phil294]

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.

[milworm]

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?

[hrobertson]

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;
    },
  },
};

[likemusic]

vue-just-super - my implementation for call super() in child inherited components (both by extends and mixins options).

It allows you to call parent component's method just by this.$super(...arguments) in child component's method (and also in mixin's methods).

[xuanWangisAlibaba19960403]

vue-super-options - It allows you to call parent component's method just by this.$supermethodName in child component's method

[chicu2]

I provide my solution

/**
 * Mix properties into target object.
 */
function extend (to, _from) {
    for (var key in _from) {
      to[key] = _from[key];
    }
    return to
}


function superExtend (to, _from) {
    for (let key in _from) {
      let parentMethod = to[key];


      if(to[key]){
        to[key] = function (...args) {
            let proxyThis = new Proxy(this,{
                get(target,p,receiver){
                    if (p === '_superInherit') {
                        return parentMethod.bind(target);
                    }
                    return Reflect.get(target,p, receiver);
                }
            })
            return _from[key].apply(proxyThis, args);
        };
      }else{
        to[key] = _from[key];
      }
    }
    return to
}


Vue.config.optionMergeStrategies.methods = function (
    parentVal,
    childVal,
    vm,
    key
  ) {
    if (!parentVal) { return childVal }
    var ret = Object.create(null);

    extend(ret, parentVal);

    if (childVal) { superExtend(ret, childVal) }

    return ret
};