首页与我联系

「短文」如何向 Vue JS Templates 添加全局变量

By 前端达人
Published in 3-Vue
November 04, 2022
1 min read
「短文」如何向 Vue JS Templates 添加全局变量

在 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 中。

前端达人公众号.jpg

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


Tags

vuevue3
Previous Article
「短文」如何在 Vue 的路由中使用Props 属性
前端达人

前端达人

专注前端知识分享

相关文章

「短文」如何在 Vue 中复制文本到剪贴板
November 04, 2022
1 min

前端站点

VUE官网React官网TypeScript官网

公众号:前端达人

前端达人公众号