Vue Prop 没有初始化器，也没有在构造函数中明确赋值

Posted 2023-02-22

【中文标题】Vue Prop 没有初始化器，也没有在构造函数中明确赋值

【英文标题】：Vue Prop has no initializer and is not definitely assigned in the constructor

【发布时间】：2018-10-29 18:15:26

【问题描述】：

我在 Vue 类组件中使用道具。道具在构造函数中定义，没有值。这可以编译并且工作正常，但是由于最新的 VS Code / TSLint 更新，我收到以下警告：

属性 'tag' 没有初始化器，也没有在构造函数中明确分配。

Vue 类组件

export default class Browser extends Vue 
  @Prop(default: '', required:false)
  tag: string

  created()
     console.log("the tag prop is " + this.tag)
  

如果我确实分配了它，我会收到 Vue 警告，您不应该在子组件中操作 Prop。

[Vue 警告]：避免直接改变 prop，因为每当父组件重新渲染时，该值都会被覆盖

由于这似乎主要是一个 linting 问题，有没有办法禁用它？还是我的代码真的错了？

【问题讨论】：

您使用的是哪个版本的 Typescript？

必须相信这是一个 linting 问题，因为您确实在装饰器中提供了默认值。

@BobHy 是的，但该值是在运行时提供的，而不是在 tslint 可以看到时提供。

【参考方案1】：

2020/06/15 更新

我当时给出的原始答案是间歇性解决方案，而不是正确的解决方案。 This 答案是这样做的正确方法；使用 ! 附加道具名称。

原答案

我有同样的问题。我通过将"strictPropertyInitialization": false, 添加到 tsconfig.json 的 compilerOptions 来修复它。

    "compilerOptions": 
        "outDir": "./built/",
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "experimentalDecorators": true,
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5",
        "strictPropertyInitialization": false,
        "lib": [
            "es5",
            "es2015",
            "dom",
            "ScriptHost"
        ]
    ,
    "include": [
        "./src/**/*"
    ]

【参考方案2】：

你不需要设置strictPropertyInitialization": false来解决这个问题。

根据 Microsoft TypeScript-Vue-Starter repo 中的this link：

属性是通过在实例变量前面加上前缀来定义的 来自 vue-property-decorator 包的 @Prop() 装饰器。因为 --strictPropertyInitialization 选项打开，我们需要告诉 TypeScript Vue 将通过附加一个！到 他们。这告诉 TypeScript “嘿，放松，其他人会 为这个属性赋值。”

您只需将! 附加到道具名称：

@Prop(default: '', required:false)
  tag!: string