vue在頁面中如何使用window全局變量
更新時間：2023年05月17日 09:27:16 作者：bidepanm
這篇文章主要介紹了vue在頁面中如何使用window全局變量問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
在頁面中使用window全局變量
main.js中定義：
window.xxx=[];
在data中定義：
data() {
? ? return {
? ? ?? ?window: window,
? ? }
? }不要在頁面中直接使用window.xxx，定義一個變量，將window.xxx賦值給這個變量，然后在頁面中使用這個變量。
https://forum.vuejs.org/t/window/36301
問題：我綁定了一個src屬性，代碼：“window.workdir+imagePath”，提示我window未定義，請問如何書寫，才能識別？
答案1：在模板中,指向的對象是this,而this 是沒有window 這個屬性的 所以正確做法是 在main.js 中
Vue.prototype.workdir = ‘/dir/demo'
組件里：
答案2：如果需要的話，可以把 window 植入 Vue 數(shù)據(jù)對象里：
{ data: {
window: window, } }vue中設(shè)置全局變量
第一步
單獨新建一個全局變量模塊文件，模塊中定義一些變量初始狀態(tài)，用export default 暴露出去。
// 接口地址
const apiUrl = "https://api.sjzeis.com";
export default {
apiUrl
};第二步
在main.js中引入，并通過Vue.prototype掛載到vue實例上面。供其他模塊文件使用；
// 全局引入global import global from "@/global/global.js" Vue.prototype.global = global
第三步
在需要的模塊文件中引入并使用；
console.log(that.global.apiUrl)
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue使用Echarts實現(xiàn)大屏可視化布局示例詳細(xì)講解
這篇文章主要介紹了Vue使用Echarts實現(xiàn)大屏可視化布局示例，本文通過實例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了如何區(qū)分vue中的v-show 與 v-if ，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-09-09
Vux是Vue.js的一個ui庫，官網(wǎng)在這里，官方文檔的配置指南側(cè)重于技術(shù)的羅列，我這里簡化一下Vux的配置流程。感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2017-12-12
這篇文章主要介紹了Vue響應(yīng)式系統(tǒng)之嵌套，我們在開發(fā)中肯定存在組件嵌套組件的情況，下文將舉例說明情況，需要的小伙伴可以參考一下2022-04-04
這篇文章主要介紹了nuxt.js寫項目時增加錯誤提示頁面操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
深入理解與使用keep-alive(配合router-view緩存整個路由頁面)
這篇文章主要介紹了深入理解與使用keep-alive(配合router-view緩存整個路由頁面)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
在vue項目中,很多場景要求我們動態(tài)改變元素的樣式,下面這篇文章主要給大家介紹了關(guān)于Vue動態(tài)樣式方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
vue3+vite+移動端webview打包后頁面加載空白問題解決辦法
這篇文章主要給大家介紹了關(guān)于vue3+vite+移動端webview打包后頁面加載空白問題的解決辦法,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-06-06
element-resize-detector監(jiān)聽普通元素的實現(xiàn)示例
當(dāng)涉及到網(wǎng)頁元素的實時尺寸變化監(jiān)測時,element-resize-detector?是一個值得推薦的開源庫,本文主要介紹了element-resize-detector監(jiān)聽普通元素的實現(xiàn)示例,感興趣的可以了解一下2024-07-07
在vue中使用vant TreeSelect分類選擇組件操作
這篇文章主要介紹了在vue中使用vant TreeSelect分類選擇組件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11