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中设置全局变量

第一步

单独新建一个全局变量模块文件，模块中定义一些变量初始状态，用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实现大屏可视化布局示例详细讲解
这篇文章主要介绍了Vue使用Echarts实现大屏可视化布局示例，本文通过实例代码图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-01-01
如何区分vue中的v-show 与 v-if
这篇文章主要介绍了如何区分vue中的v-show 与 v-if ，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下
2020-09-09
Vue中的Vux配置指南
Vux是Vue.js的一个ui库，官网在这里，官方文档的配置指南侧重于技术的罗列，我这里简化一下Vux的配置流程。感兴趣的朋友跟随脚本之家小编一起学习吧
2017-12-12
Vue2响应式系统之嵌套
这篇文章主要介绍了Vue响应式系统之嵌套，我们在开发中肯定存在组件嵌套组件的情况，下文将举例说明情况，需要的小伙伴可以参考一下
2022-04-04
nuxt.js写项目时增加错误提示页面操作
这篇文章主要介绍了nuxt.js写项目时增加错误提示页面操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
这篇文章主要介绍了深入理解与使用keep-alive(配合router-view缓存整个路由页面)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
Vue动态样式方法实例总结
在vue项目中,很多场景要求我们动态改变元素的样式,下面这篇文章主要给大家介绍了关于Vue动态样式方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-02
vue3+vite+移动端webview打包后页面加载空白问题解决办法
这篇文章主要给大家介绍了关于vue3+vite+移动端webview打包后页面加载空白问题的解决办法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
2024-06-06
element-resize-detector监听普通元素的实现示例
当涉及到网页元素的实时尺寸变化监测时,element-resize-detector 是一个值得推荐的开源库,本文主要介绍了element-resize-detector监听普通元素的实现示例,感兴趣的可以了解一下
2024-07-07
在vue中使用vant TreeSelect分类选择组件操作
这篇文章主要介绍了在vue中使用vant TreeSelect分类选择组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11