typescript - vue类组件继承，方法来自基类 "is not a function"

Question

我正在尝试制作 class inheritance defining stories for storybook 时避免代码冗余因为我有一堆场景(故事)来涵盖更少/更多的数据相似性。我正在使用带有 vue-property-decorator 的 vue-class-component 方法定义组件。
这是一个例子:

//myStory.stories.ts file
import Vue from 'vue'
import {Component} from 'vue-property-decorator'
import {store} from 'path/to/stores'
import Vuex from 'vuex'

const BaseOptions = {
  components: {Component1, Component2},
  template: MyTemplate,
  store: new Vuex.Store<IRootState>(store)
}

class BaseClass extends Vue {
  public method1() {
    console.log("call from method 1")
  }
  // I want to customize many methods here in BaseClass: method2, method3, etc
}

// Story book page
export default {
  title: 'My/Page',
  // Our exports that end in "Data" are not stories.
  excludeStories: /.*Data$/,
}

// Defining storybook stories:
export const ScenarioOne = () => (
  @Component<any>(
    {
      ...BaseOptions,
      mounted() {
        this.method1()
      },
    }
  )
  class CurrentClass extends BaseClass {} // This isn't working >> error: _this4.method1 is not a function
)


export const ScenarioTwo = () => (
  @Component<any>(
    {
      ...BaseOptions,
      mounted() {
        this.method1()
      },
    }
  )
  class CurrentClass extends BaseClass {
    // If I redefine the method1(), it's working
    public method1() {
       console.log("call from method 1 (redefined)")
    }
  }
)

为什么我的 scenarioOne无法调用 method1()而 scenarioTwo可以 ？

Answer 1

您还必须将基类定义为 @Component({}) 以及继承链中的所有类，因此:

import Vue from "vue";
import Component from "vue-class-component";

@Component({})
class BaseClass extends Vue {
}

@Component({})
class SubClass extends BaseClass {
}