Vue(TypeScript)组件superOptions属性冲突问题求助

问题根源 #

你遇到的superOptions属性冲突错误，核心原因是重复使用了@Component装饰器。当多次调用@Component时，vue-class-component会重复生成Vue组件初始化所需的内部静态属性，导致命名冲突，干扰组件正常工作流程。

解决方案 #

把多个@Component装饰器的配置合并到同一个装饰器中，同时可以优化props的定义方式（可选但更简洁）：

• 合并所有组件配置（比如注册子组件、定义props等）到同一个@Component里，避免多次装饰
• 推荐使用vue-property-decorator的@Prop()装饰器来声明props，比通过Vue.extend自定义props子类更简洁，也能避免额外的继承冲突

修改后的完整代码 #

<template>
  <div>
    <md-menu>
      <md-button md-menu-trigger>Games</md-button>
      <md-menu-content>
        <md-menu-item>My Item 1</md-menu-item>
        <md-menu-item>My Item 2</md-menu-item>
      </md-menu-content>
    </md-menu>
    <md-menu md-size="medium" md-align-trigger>
      <md-button md-menu-trigger>Align with trigger</md-button>
      <md-menu-content>
        <md-menu-item>
          <md-button class="md-icon-button">
            <md-icon>home</md-icon>
          </md-button>
        </md-menu-item>
      </md-menu-content>
    </md-menu>
  </div>
</template>
<style lang="scss" scoped>
.md-menu {
  margin: 24px;
}
</style>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop } from 'vue-property-decorator';
import { mdMenu, mdButton , mdIcon } from 'vue-material'

// 合并所有配置到单个@Component装饰器中
@Component({
  components: { mdButton, mdMenu, mdIcon }
})
// 组件名推荐用大驼峰，符合Vue和TS的命名规范
export default class MyHeader extends Vue { 
  @Prop() msg!: string; // 用@Prop装饰器声明props，!为非空断言（可根据业务调整）

  helloTimes: number = 0
  test1: string = 'Nikola test'

  sayHello () {
    this.helloTimes++
  }

  greet (): void {
    console.log('Greeting: ' + this.msg)
    // this.$refs.HelloWorld.sayHello()
  }
}
</script>

额外说明 #

如果不想引入vue-property-decorator，可以去掉@Prop()相关代码，直接在@Component的props选项中定义msg，同时让组件类直接继承Vue即可，不需要自定义CompProps子类，这样也能避免继承带来的内部属性冲突。

内容的提问来源于stack exchange，提问作者Nikola Lukic