全局属性的“功能”类型上不存在 Vue3 属性“x”

Posted 2023-05-06

【中文标题】全局属性的“功能”类型上不存在 Vue3 属性“x”

【英文标题】：Vue3 property 'x' does not exist on type 'Function' for global property

【发布时间】：2021-12-31 17:50:09

【问题描述】：

我有一个 Quasar 应用，但似乎遇到了一个奇怪的问题。 我正在尝试定义一个全局变量，它是一个仅包含有关应用程序的元信息的对象。 应用程序完全编译，正确的信息显示在 html 中，但在 VSCode 中出现错误。

src/boot/BackChat.js

import  boot  from 'quasar/wrappers';

const version = '0.0.0';

const backChat = 
  version
;


export default boot(( app, router, store ) => 
  app.config.globalProperties.backChat = backChat;
);

登录.vue

// ...
<script>
import  ref  from 'vue';

export default 
  data() 
    return 
      backChat: this.backChat
    ;
  

</script>

我使用这个接口是错误的还是这只是 Vue 文件验证的一个错误？似乎它认为 Login.vue 中的“backChat”是一个函数。如果我将 data() 更改为 mount()，它不再是一个函数，但是我无法在 DOM 中访问它。我对 Vue 很陌生。

【问题讨论】：

可能只是类型推断的问题 - 在 Vue 3（您似乎正在使用）中，您应该使用 defineComponent

定义您的组件

【参考方案1】：

我有一个解决方法，这是最简单的方法。我不确定这是否是您的 supposed 这样做的方式，但由于它认为它是一个函数，我只是将 globalProperty 设为一个返回对象的函数。

src/boot/BackChat.js

// ...
export default boot(( app, router, store ) => 
  app.config.globalProperties.$backChat = () => backChat;
);

登录.vue

// ...
data() 
    return 
      username,
      password,
      backChat: this.$backChat()
    ;
,

这修复了 Vue 文件中突出显示的错误，并允许使用相同的全局对象。