javascript - 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 组件。它的亲子关系主要通过 Prop 和事件起作用。

但是有三种解决方案:

<强>1。传递 Prop (亲子)

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。混合

如果这是你想在其他地方使用的常用功能，使用 mixin 可能更惯用:

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