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

Question

我正在尝试制作 class inheritance当 defining stories for storybook 时避免代码冗余因为我有很多场景(故事)需要用更少/更多的数据相似性来覆盖。我正在使用 vue-class-component 方法 vue-property-decorator定义组件。

这是一个例子:

//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 {
}