import { createApp } from 'vue'
import { App } from './App.vue'
import { router } from './router'
createApp(App).use(router).mount('#app')
使用Vue 3和vue-cli或Vite添加全局变量:
import { createApp } from 'vue'
import { App } from './App.vue'
import { router } from './router'
// 1. Assign app to a variable
let app = createApp(App)
// 2. Assign the global variable before mounting
app.config.globalProperties.globalVar = 'globalVar'
// 3. Use router and mount app
app.use(router).mount('#app')
根据samayo's answer on this post的 very bottom,全局变量仅在Options API上可用。 引用他的答案的底部: 注意:这仅适用于Options API。Evan You(Vue创建者)说:“config.globalProperties是复制Vue. prototype行为的转义。在安装函数中,只需导入所需内容或显式使用provide/inject向应用程序公开属性。
7条答案
按热度按时间thtygnil1#
最直接的替换是
app.config.globalProperties
。请参见:https://vuejs.org/api/application.html#app-config-globalproperties
因此:
变成:
这是一个特定的应用程序,而不是像
Vue.prototype
那样是全局的。这是通过设计,所有的“全局”配置选项现在都是一个应用程序。相关的RFC在这里:
https://github.com/vuejs/rfcs/blob/master/active-rfcs/0009-global-api-change.md
添加到
globalProperties
的属性将通过应用程序中所有组件的组件示例可用。因此,如果您使用Options API,则可以使用this.$myGlobalVariable
访问它们,就像使用Vue.prototype
一样。它们也可以在没有this.
的模板中使用,例如{{ $myGlobalVariable }}
。如果您使用的是Composition API,那么您仍然可以在模板中使用这些属性,但您将无法访问
setup
中的组件示例,因此这些属性将无法在那里访问。虽然涉及
getCurrentInstance()
的黑客可以用于访问setup
中的globalProperties
,但这些黑客涉及使用未记录的API,并且不是推荐的方法。相反,应用级
provide
/inject
(也在该RFC中讨论)可以用作Vue.prototype
的替代方案:在后代组件中,可以使用
inject
进行访问。例如,使用<script setup>
:或者使用显式的
setup
函数:或者使用选项API:
文件:https://vuejs.org/api/application.html#app-provide
这里的想法是组件可以显式声明属性,而不是通过魔法继承它。这避免了名称冲突等问题,因此不需要使用
$
前缀。它还可以帮助更清楚地了解属性的确切来源。inject
函数通常被 Package 在一个composable中。例如,Vue Router公开的useRoute
composable只是inject
的 Package 器。除了
globalProperties
和provide
/inject
之外,还有各种其他技术可以用来解决与Vue.prototype
相同的问题。例如,ES模块,存储,甚至全局mixin。这些不一定是这里发布的特定问题的直接答案,但我已经详细描述了各种方法:https://skirtles-code.github.io/vue-examples/patterns/global-properties.html
你喜欢哪种方法取决于你的情况。
byqmnocz2#
如何使用Vue 3和vue-cli(或Vite)添加全局变量
**注意:**您可以从
$globalVariable
中删除美元符号,只使用globalVariable
,就像文档中一样。最初,你的main.js文件看起来像这样(为常见用例添加路由器):
使用Vue 3和vue-cli或Vite添加全局变量:
然后访问组件中的变量,如下所示:
就像在模板中这样:
就是这样。编码快乐!
关于全局变量和合成API
根据samayo's answer on this post的 very bottom,全局变量仅在Options API上可用。
引用他的答案的底部:
注意:这仅适用于Options API。Evan You(Vue创建者)说:“config.globalProperties是复制Vue. prototype行为的转义。在安装函数中,只需导入所需内容或显式使用provide/inject向应用程序公开属性。
h79rfbju3#
我建议使用
provide/inject
方法,如下所示:在main.js中:
在某些子组件或孙组件中:
对于合成API和脚本设置:
xxhby3vn4#
如果可能的话,你应该使用import或provide/inject。另一种定义全局变量/函数并使用它们的方法是使用globalProperties(尽管这似乎被认为是一种反模式)。但是如果你使用的库使用globalProperties,那么你可以这样使用它。这也适用于全局函数。
1.使用选项API
2.使用设置方式
llew8vvj5#
对于那些对如何在
setup()
方法中访问globalProperties
感到困惑的人,可以按照下面的文档使用getCurrentInstance()
。https://v3.vuejs.org/api/composition-api.html#getcurrentinstance
rdrgkggo6#
在我的例子中,我必须创建一个全局变量并从脚本中获取数据。
使用的提供和注入:
在
main.js
中:在
index.html
中:在子组件中:
x8diyxa77#
window.myGlobal =“这很简单”;