带有打字稿的 vue-class-component 语法答案

【问题标题】：vue-class-component syntax with typescript带有打字稿的 vue-class-component 语法
【发布时间】：2020-04-25 18:56:04
【问题描述】：

https://github.com/vuejs/vue-class-component 上的示例（对于 vuejs3 中的新组件语法），但我使用的是直接类型脚本而不是 babel。因此我尝试了：

<script lang="ts">
import Vue from "vue"
import Component from "vue-class-component"

@Component({
    props: {
        propMessage: String
    }
})
export default class MyComponent extends Vue {
    helloMsg = "Hello, " + this.propMessage

}
</script>

很遗憾，找不到this.propMessage。如何更改语法才能找到它？

【问题讨论】：

尽管有标签，但这个问题与vuejs3无关。

标签： vue.js vue-component vuejs3

【解决方案1】：

我猜this.props.propMessage 会起作用（但我现在无法测试），你可能已经尝试过了。

我建议您使用来自vue-property-decorator 的@Prop 装饰器，它在长端提供更清晰的语法。

它会给出类似的东西：

@Component
export default class MyComponent extends Vue {
    @Prop() propMessage !: string;

    helloMsg = "Hello, " + this.propMessage;
}

祝你好运

【讨论】：