vue-class-component: Super expression 必须是 null 或函数,不能是 undefined
vue-class-component: Super expression must either be null or a function, not undefined
好吧,这是一个奇怪的用例,但无论如何。
我有一个控件组件,它包括菜单组件,它还包括一个控件组件但没有菜单(奇怪的东西,但这就是设计)。
我做什么。
控件组件:
import {Component, Prop, Vue} from 'vue-property-decorator'
import Burger from "./Burger";
import ShadowLogo from "./ShadowLogo";
import MegaMenu from "./MegaMenu";
@Component
export default class Controls extends Vue {
@Prop({default: false})
showMenu: boolean;
renderLogo(h) {
return <div class="logo"><ShadowLogo/></div>
}
renderBurger(h) {
return <Burger opened={this.showMenu} label="меню" on-want-change={e => this.$emit('show-menu', !this.showMenu)}></Burger>
}
renderFooter(h) {
return <div class="copyrights"></div>
}
renderMenu(h) {
return <div class="menu-layer">
{this.showMenu ? <transition name="fade" appear={true}><MegaMenu/></transition> : null}
</div>
}
render(h) {
return <div class={["control-overlay", this.showMenu ? 'menu-opened' : null]}>
{this.renderMenu(h)}
{this.renderLogo(h)}
{this.renderBurger(h)}
{this.renderFooter(h)}
</div>
}
}
Menu inner controls component to be inserted inside the menu — 相同,但没有菜单组件(显然是为了防止递归)
import Controls from "./Controls";
import {Component} from 'vue-property-decorator'
@Component
export default class MenuInnerControls extends Controls {
renderMenu(h) {
return null;
}
}
但是在这个设置中我得到了一个错误:
51:13 Uncaught TypeError: Super expression must either be null or a function, not undefined
at _inherits (51:13)
at eval (51:19)
at eval (MenuInnerControls.js?9737:8)
at Object.<anonymous> (app.js:394)
at __webpack_require__ (app.js:20)
at eval (22:4)
at Object.<anonymous> (app.js:219)
at __webpack_require__ (app.js:20)
at eval (18:8)
at Object.<anonymous> (app.js:192)
(MenuInnerControls.js?9737:8 — 是继承了class)
中的renderMenu方法
好的,发现问题出在导入的循环依赖中。 Controls
渲染 MegaMenu
,渲染 MenuInnerControls
,扩展 Controls
。
即使如此 MenuInnerControls
也没有引用 MegaMenu
,这会导致导入循环依赖。其他语言应该没问题,但是js... oh
好吧,这是一个奇怪的用例,但无论如何。
我有一个控件组件,它包括菜单组件,它还包括一个控件组件但没有菜单(奇怪的东西,但这就是设计)。
我做什么。
控件组件:
import {Component, Prop, Vue} from 'vue-property-decorator'
import Burger from "./Burger";
import ShadowLogo from "./ShadowLogo";
import MegaMenu from "./MegaMenu";
@Component
export default class Controls extends Vue {
@Prop({default: false})
showMenu: boolean;
renderLogo(h) {
return <div class="logo"><ShadowLogo/></div>
}
renderBurger(h) {
return <Burger opened={this.showMenu} label="меню" on-want-change={e => this.$emit('show-menu', !this.showMenu)}></Burger>
}
renderFooter(h) {
return <div class="copyrights"></div>
}
renderMenu(h) {
return <div class="menu-layer">
{this.showMenu ? <transition name="fade" appear={true}><MegaMenu/></transition> : null}
</div>
}
render(h) {
return <div class={["control-overlay", this.showMenu ? 'menu-opened' : null]}>
{this.renderMenu(h)}
{this.renderLogo(h)}
{this.renderBurger(h)}
{this.renderFooter(h)}
</div>
}
}
Menu inner controls component to be inserted inside the menu — 相同,但没有菜单组件(显然是为了防止递归)
import Controls from "./Controls";
import {Component} from 'vue-property-decorator'
@Component
export default class MenuInnerControls extends Controls {
renderMenu(h) {
return null;
}
}
但是在这个设置中我得到了一个错误:
51:13 Uncaught TypeError: Super expression must either be null or a function, not undefined
at _inherits (51:13)
at eval (51:19)
at eval (MenuInnerControls.js?9737:8)
at Object.<anonymous> (app.js:394)
at __webpack_require__ (app.js:20)
at eval (22:4)
at Object.<anonymous> (app.js:219)
at __webpack_require__ (app.js:20)
at eval (18:8)
at Object.<anonymous> (app.js:192)
(MenuInnerControls.js?9737:8 — 是继承了class)
中的renderMenu方法好的,发现问题出在导入的循环依赖中。 Controls
渲染 MegaMenu
,渲染 MenuInnerControls
,扩展 Controls
。
即使如此 MenuInnerControls
也没有引用 MegaMenu
,这会导致导入循环依赖。其他语言应该没问题,但是js... oh