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 數據對象里：
{ data: {
window: window, } }vue中設置全局變量
第一步
單獨新建一個全局變量模塊文件，模塊中定義一些變量初始狀態(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)
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue使用Echarts實現大屏可視化布局示例，本文通過實例代碼圖文相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了如何區(qū)分vue中的v-show 與 v-if ，幫助大家更好的理解和學習vue框架，感興趣的朋友可以了解下2020-09-09
Vux是Vue.js的一個ui庫，官網在這里，官方文檔的配置指南側重于技術的羅列，我這里簡化一下Vux的配置流程。感興趣的朋友跟隨腳本之家小編一起學習吧2017-12-12
這篇文章主要介紹了Vue響應式系統之嵌套，我們在開發(fā)中肯定存在組件嵌套組件的情況，下文將舉例說明情況，需要的小伙伴可以參考一下2022-04-04
這篇文章主要介紹了nuxt.js寫項目時增加錯誤提示頁面操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
深入理解與使用keep-alive(配合router-view緩存整個路由頁面)
這篇文章主要介紹了深入理解與使用keep-alive(配合router-view緩存整個路由頁面)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
在vue項目中,很多場景要求我們動態(tài)改變元素的樣式,下面這篇文章主要給大家介紹了關于Vue動態(tài)樣式方法的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
vue3+vite+移動端webview打包后頁面加載空白問題解決辦法
這篇文章主要給大家介紹了關于vue3+vite+移動端webview打包后頁面加載空白問題的解決辦法,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-06-06
element-resize-detector監(jiān)聽普通元素的實現示例
當涉及到網頁元素的實時尺寸變化監(jiān)測時,element-resize-detector?是一個值得推薦的開源庫,本文主要介紹了element-resize-detector監(jiān)聽普通元素的實現示例,感興趣的可以了解一下2024-07-07
在vue中使用vant TreeSelect分類選擇組件操作
這篇文章主要介紹了在vue中使用vant TreeSelect分類選擇組件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11