在Vue 3中設置全局變量非常簡單。你可以在Vue.js實例的創建之前定義全局變量。
const app = Vue.createApp({
data() {
return {
globalVar: 'global variable'
}
}
})
app.config.globalProperties.globalVar = app.globalVar
在這個例子中,我們使用Vue.createApp()方法創建一個Vue應用程序實例。然后在data()中定義了一個名為globalVar的數據屬性,它將被設置為全局變量。
我們可以通過使用app.config.globalProperties來設置全局變量。在這個例子中,我們將Vue應用程序實例的全局變量globalVar分配給Vue.config.globalProperties.globalVar屬性。
現在,我們已經成功地將全局變量設置到了Vue.js應用程序中。我們可以在任何地方使用這個全局變量。
在組件中使用全局變量:
app.component('example-component', {
template: '<div>{{ $root.globalVar }}</div>'
})
在上面的例子中,我們定義了一個名為“example-component”的Vue組件,并在組件模板中使用了全局變量。
使用全局變量不僅可以讓你在整個應用程序中共享同一個變量,而且可以減少代碼的重復性和工作量。