Vue.js继承调用父方法

Question

是否可以在 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。有可能吗？

Answer 1

不，vue 不适用于直接继承模型。据我所知，你不能 A.extend 一个组件。它的亲子关系主要是通过道具和事件来实现的。

但是有三种解决方案：

1.传递道具（亲子）

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

var SomeComponentB = Vue.extend({
   props: [ 'someFunctionParent' ],
   methods: {
       someFunction: function () {
           // Do your stuff
           this.someFunctionParent();
       }
   }
});

并且在 SomeComponentA 的模板中：

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

2。混合

如果这是您想要在其他地方使用的常用功能，使用混合可能更符合习惯：

var mixin = {
    methods: {
        someFunction: function() {
            // ...
        }
    }
};

var SomeComponentA = Vue.extend({
    mixins: [ mixin ],
    methods: {
    }
});

var SomeComponentB = Vue.extend({
   methods: {
       someFunctionExtended: function () {
           // Do your stuff
           this.someFunction();
       }
   }
});

3。调用parent props（亲子，丑）

// In someComponentB's 'someFunction':
this.$parent.$options.methods.someFunction(...);

Answer 2

如果有人对 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');
    },
  }
}

jsfiddle: https://jsfiddle.net/7b3tx0aw/2/

更多信息：

此解决方案适用于出于某种原因无法使用 TypeScript 的开发人员（我认为这允许将 vue 组件定义为类，这反过来又允许完全继承功能集）。
关于解决方案的进一步阐述（原因和方式）：https://github.com/vuejs/vue/issues/2977
这并没有那么难看，考虑到这里没有使用火箭科学（用 this 指针调用匿名函数对于任何体面的 js 开发者来说应该不是什么魔法）。

如何使用`Function.prototype.call()`

引用https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

示例代码：

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"

Answer 3

万一有人要求解决方案，这里是我的并且工作正常：

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

使用 https://vuejs.org/v2/api/#extends 中的 juste extends 替换 Vue.extends()

的用法

Vue.js继承调用父方法

Vue.js inheritance call parent method

javascript

vue.js

inheritance

methods

method-call

如何使用`Function.prototype.call()`

Vue.js继承调用父方法

Vue.js inheritance call parent method

javascript

vue.js

inheritance

methods

method-call

如何使用Function.prototype.call()

如何使用`Function.prototype.call()`