在 Vue 3 templates 模板中我们无法访问 window 对象上的变量。但是，您可以在 Vue 应用程序上设置 config.globalProperties 属性来注册任何模板都可以访问的全局变量和方法。如下段示例代码

const app = Vue.createApp();

// Now any template can access `answer` and `capitalizeFirstLetter()`
app.config.globalProperties = {
  answer: 42,
  capitalizeFirstLetter(str) {
    if (!str) {
      return '';
    }
    return str.slice(0, 1).toUpperCase() + str.slice(1);
  }
};

使用此代码，您可以在组件的模板中的任何位置执行 {{answer}} 并且会显示42。你还可以使用 {{capitalizeFirstLetter(name)}} 将任何模板中 name 属性的第一个字母大写。

如果组件与config.globalproperties有命名冲突，则组件具有优先级。例如，你的组件包含了一个 answer 的数据状态属性，例如 data: () => ({ answer: 99 }), {{answer}}，将会显示99，并不是42。

什么时候使用全局属性

我们可以使用全局属性来定义格式化逻辑，例如前面的 capitalizeFirstLetter() 示例。当您希望跨多个组件以相同方式格式化字符串或日期时，有许多类似的情况，这样你就没必要再每个组件里进行重复定义。

我们只建议对方法使用全局属性，而不是对象或值。全局属性与 Vue 的组件更新没有关系，因此更新比如 answer 的数据状态，不会在 Vue 呈现 answer 的任何地方进行更新。我们不建议在 Vue 模板中访问配置值，例如 API 密钥，因此无需将 API 密钥放在 config.globalProperties 中。

注：本文属于原创文章，版权属于「前端达人」公众号及 qianduandaren.com 所有，未经授权，谢绝一切形式的转载