时间戳

首页 > 解决方案 > 带有打字稿的 vue-class-component 语法

vue.js - 带有打字稿的 vue-class-component 语法

问题描述

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找不到。我如何必须更改语法才能找到它？

标签： vue.jsvue-componentvuejs3

解决方案

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

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

它会给出类似的东西：

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

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

祝你好运

推荐阅读