Vue+TypeScript组件声明问题：依赖冲突与语法困惑

1. 依赖树冲突问题解决 #

你装的vue-class-component@7.2.6是Vue2专属版本，它的peer依赖明确要求vue@^2.0.0，和当前Vue3完全不兼容，不是版本满足最低要求的问题，是版本分支选错了。

解决方法：

• 安装适配Vue3的vue-class-component版本，直接装最新版即可：

  npm install vue-class-component@latest
  # 或者明确指定8.x版本（Vue3适配分支）
  npm install vue-class-component@^8.0.0
  

• 对应的vue-property-decorator也要装适配Vue3的版本，需安装^10.0.0及以上：

  npm install vue-property-decorator@latest
  

  这个版本的vue-property-decorator会自动依赖正确的vue-class-component版本，不会再出现冲突。

2. vue-property-decorator结合defineComponent的正确用法 #

模板无法访问组件内定义的属性/方法，大概率是装饰器使用或组件包裹方式不对，下面是标准写法示例：

组件代码示例 #

<template>
  <div>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">加1</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component
export default class Counter extends Vue {
  // 定义响应式数据
  count = 0

  // 定义方法
  increment() {
    this.count++
  }

  // 定义props
  @Prop({ default: '计数器' })
  title!: string
}
</script>

关键注意点 #

• 必须用@Component装饰器修饰继承自Vue的类组件，这样Vue才能识别类内的响应式数据、方法等。
• 如果要用defineComponent包裹（提升TypeScript类型推断能力），写法如下：

  import { defineComponent } from 'vue'
  import { Component, Prop, Vue } from 'vue-property-decorator'
  
  export default defineComponent({
    components: {}, // 可注册子组件
    setup() {
      // 需要结合Composition API时，可在此编写逻辑
    }
  })
  
  @Component
  class Counter extends Vue {
    // ... 组件逻辑
  }
  

• TypeScript配置文件tsconfig.json必须开启装饰器支持：

  {
    "compilerOptions": {
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "target": "ESNext",
      "module": "ESNext",
      "moduleResolution": "Node",
      "strict": true
    }
  }
  

常见排查点 #

• 检查是否遗漏@Component装饰器，没有这个装饰器，类内的属性和方法不会被Vue处理，模板自然访问不到。
• 确认安装的vue-property-decorator和vue-class-component版本适配Vue3，旧版本在Vue3环境下会有兼容性问题。

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