Vue类组件（TypeScript）报错Cannot read property 'message' of null，求解答

嘿，这个坑我之前刚踩过！核心原因其实很简单——你忘记给组件类添加@Component装饰器了😅

为什么会出现这个报错？ #

vue-class-component库需要通过@Component装饰器，把你的TypeScript类转换成Vue能识别的组件实例。如果少了这个装饰器，类里的方法（比如onClick）不会被正确绑定到Vue组件的上下文，导致点击按钮时this指向的不是Vue实例，而是null，自然就读不到message属性了。

修正后的代码 #

只需要在类的上方补上@Component装饰器就行：

<template>
  <button @click="onClick">Click!</button>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

// 关键：添加@Component装饰器，让Vue识别这个类为组件
@Component
export default class MyComponent extends Vue {
  // Initial data can be declared as instance properties
  message: string = 'Hello!'

  // Component methods can be declared as instance methods
  onClick (): void {
    window.alert(this.message)
  }
}
</script>

额外小检查 #

确保你已经正确安装了依赖：

npm install vue-class-component --save

如果是用Vue CLI创建的TS项目，这个依赖应该已经默认配置好了，不用额外折腾。

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