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通过辅助函数mapState、mapActions、mapMutations，把vuex.store中的属性映射到vue实例身上，这样在vue实例中就能访问vuex.store中的属性了，对于操作vuex.store就很方便了，本文具体的介绍下这些辅助函数的使用方法2021-06-06
这篇文章主要介绍了vue+Element-ui实现分页效果 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-12-12
这篇文章主要介绍了vue实现自定义公共组件及提取公共的方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
下面小编就为大家带来一篇Vue渲染函数详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了详解利用eventemitter2实现Vue组件通信，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
Vue实例中生命周期created和mounted的区别详解
这篇文章主要给大家介绍了关于Vue实例中生命周期created和mounted区别的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。2017-08-08
这篇文章主要介绍了vue + element-ui的分页问题实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件间的相互通信是非常重要的，这篇文章主要介绍了vue中组件间通信的6种方式,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了详解vue不同环境配置不同的打包命令，主要包括正式环境、测试环境和开发环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
本文主要介绍了vue3中element-plus表格搜索过滤数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-03-03
最新评论