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