Question

我希望能够在基于类的组件中使用vue-property-decorator声明我的Prop，而不必初始化属性。

我陷入困境：

如果不初始化，TypeScript不会编译：

“ TS2564（TS）属性'parentData'没有初始化程序，并且没有肯定是在构造函数中分配的。”

如果我确实进行了初始化，则VueJS会在运行时引发警告：

“避免直接更改道具，因为该值将被覆盖只要父组件重新呈现。”

我下面的内容有效，但是警告很烦人，也让我认为有更好的方法可以做到：

import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import { Client } from '../../../../domainmodels/client';

@Component({})
    export default class SearchLocationsComponent extends Vue {

         @Prop() 
         parentData: Client = new Client();

    }


My dependencies:   
"devDependencies": {
    "@types/webpack-env": "^1.13.0",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "^3.0.0",
    "css-loader": "^0.25.0",
    "event-source-polyfill": "^0.0.7",
    "extract-text-webpack-plugin": "^2.0.0-rc",
    "file-loader": "^0.9.0",
    "style-loader": "^0.13.1",
    "typescript": "^2.2.1",
    "url-loader": "^0.5.7",
    "vue": "^2.2.2",
    "vue-loader": "^11.1.4",
    "vue-property-decorator": "^5.0.1",
    "vue-router": "^2.3.0",
    "vue-template-compiler": "^2.2.2",
    "webpack": "^2.2.0",
    "webpack-cli": "^3.3.2",
    "webpack-hot-middleware": "^2.12.2"   
}

Answer 1

如果在构造阶段未初始化属性，则应明确指出它可能是未定义的：

parentData: Client | undefined;

要为修饰后的@Prop成员分配默认值，应使用修饰符的default参数：

@Prop({ default: () => new Client}) 
parentData: Client | undefined;

或者，作为不推荐选项，您可以将"strictPropertyInitialization": false添加到打字稿编译器选项中。

更新1：

对于这种情况，最合适的解决方法是使用打字稿2.7中引入的definite assignment assertion modifiers。将其与默认的Prop装饰器初始化结合起来可以达到目的：

@Prop({ default: () => new Client }) 
parentData!: Client;

Answer 2

也许我有点迟了，但是如果您用Typescript编写Vue，则可能要使用PropSync而不是Prop提供的vue-property-decorator。

例如，您具有以下内容：

@Prop() propArrayName!: type[];

相反，您可以使用：

@PropSync('propArrayName', { type: Array }) _localArrayVariable!: type[];

通过这种方式，您可以避免对Prop（）进行变异，而是通过prop（）来实现prop。（...），您可以在此处阅读更多内容：

https://github.com/kaorun343/vue-property-decorator#-propsyncpropname-string-options-propoptions--constructor--constructor---decorator

Vue 2 + TypeScript：避免直接更改Prop-在具有vue-property-decorator的基于类的组件中

2 个答案: