vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance＜{ readyOnly…Vetur（2339）

在Vscode中开发Vue项目时，可能会遇到如下错误提示：Property ‘xxx’ does not exist on type ‘CombinedVueInstance<{ readyOnly: false; }, {}, {}, {}, Readonly<Record<…”，这种错误提示一般是类型检查导致的。

解决该问题的方法如下：

1. 使用注释忽略类型检查

在Vue组件中指定一个“注释区块”，使用该注释块可以避免TypeScript对该实例中的其他属性进行类型检查。

示例：

<template>
  <div>
    {{ msg }}
  </div>
</template>

<script>
// @ts-ignore
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      other: 'This is another attribute'
    }
  }
}
</script>

在上述示例中，我们使用了注释“// @ts-ignore”忽略了Vue中data方法中的other属性，在组件中直接使用该属性时会报“Property ‘other’ does not exist on type ‘CombinedVueInstance<{readonly: false;}, {}, {}, {}, Readonly<Record<…>>’”错误，在添加了忽略注释后，该组件就不会报错了。

1. 声明属性

我们可以在Vue组件对象中声明需要使用的属性，以指示TypeScript注入该属性，从而避免错误。

示例：

<template>
  <div>
    {{ msg }}
  </div>
</template>

<script lang="ts">
interface ComponentData {
  msg: string
}

export default {
  name: 'HelloWorld',

  data(): ComponentData{
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

在上述示例中，我们使用了interface声明了需要使用的属性msg，并在data方法中返回了该对象，指示TypeScript注入该属性后，该组件就不会报错了。

总结：

以上两种方式都是为了避免TypeScript对Vue组件进行属性检查导致的报错，如果你使用的是VSCode中的Vetur插件，还可以在安装vue-shim.d.ts文件后解决该问题。