vue-class-组件语法与打字稿

Question

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

Answer 1

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

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

它会给出类似的东西：

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

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

祝你好运

vue-class-组件语法与打字稿

vue-class-component syntax with typescript

vue.js

vue-component

vuejs3