Vue.js 3 中添加全局变量

发布于07月26日

有人知道如何在Vue 3中添加全局变量吗？

在Vue 2中，我们在main.js文件中使用:

Vue.prototype.$myGlobalVariable = globalVariable

推荐答案

最直接的替代品是app.config.globalProperties.见:

https://v3.vuejs.org/api/application-config.html#globalproperties

所以:

Vue.prototype.$myGlobalVariable = globalVariable

变成:

const app = Vue.createApp({})
app.config.globalProperties.$myGlobalVariable = globalVariable

请注意，这是针对特定应用程序的，而不是像Vue.prototype一样是全局的.这是在设计上，所有全局配置选项现在都适用于一个应用程序.

请注意，应用程序级别provide/inject(也在RFC中讨论)也是使用Vue.prototype的替代方案:

const app = Vue.createApp({})

app.provide('myGlobalVariable', globalVariable)

// In the descendant component
export default {
  inject: ['myGlobalVariable']
}

doctor :https://v3.vuejs.org/api/application-api.html#provide

这里的 idea 是，组件可以显式声明属性，而不是通过魔法继承它.这避免了名称冲突等问题，因此不需要使用$前缀.这也有助于明确房产的确切来源.

你喜欢哪种方法取决于你的情况.

Vue.js相关问答推荐

为什么元素会从Vue 3中的TransitionGroup左上角出现？

保持页面重新加载之间的状态

Vue 3 在一个值更改问题后再次重新渲染每一行

如何向添加方法和 v-model？

在 VueJS 中为 Get、Post、Patch 配置全局标头的最佳方法

Defer推迟执行，直到外部脚本加载到 Vue.js

在 vue 3 中使用 vue-chartjs：createElement 不是函数

如何在异步功能上使用 debounce？

为什么当我 Select 第二个输入框时音译transliteration不起作用？

Vuejs在复选框 Select 上切换div可见性

vue js 中的 process.env.BASE_URL 是什么？

如何在 Vuex 中获取 Vue 路由参数？

VueJS错误编译模板

vue 3 使用 Vuex 和路由的服务器端渲染

如何从 vue 组件调用 App.vue 中的方法

Vue - 如何在 v-if 或组件中使用窗口对象

Vuetify 数据表不显示数据

如何在 Vue.js 插槽范围内传递方法

Vue js在列表中添加动态字段，删除和排序不起作用

返回 VueJS 方法的Native Code消息

实用课程推荐