vue类组件继承，来自基类的方法“不是函数”

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