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)
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
解决router.beforeEach()动态加载路由出现死循环问题
这篇文章主要介绍了解决router.beforeEach()动态加载路由出现死循环问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了通过vue写一个瀑布流插件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了vue .sync修饰符的使用,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
浅谈element中InfiniteScroll按需引入的一点注意事项
这篇文章主要介绍了浅谈element中InfiniteScroll按需引入的一点注意事项，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要为大家详细介绍了Vue滑块解锁组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
vue3中reactive数据被重新赋值后无法双向绑定的解决
这篇文章主要介绍了vue3中reactive数据被重新赋值后无法双向绑定的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了vue踩坑记录之echarts动态数据刷新问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
组件是Vue是一个可以重复使用的Vue实例, 它拥有独一无二的组件名称,它可以扩展HTML元素,以组件名称的方式作为自定义的HTML标签，这篇文章主要介绍了vue组件component的注册与使用,需要的朋友可以参考下2022-08-08
vue使用element-ui tabs切换echarts解决宽度100%方式
这篇文章主要介绍了vue使用element-ui tabs切换echarts解决宽度100%方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
Vue Router 配合 keep-alive 不生效的问题及解决方案
我在 app.vue 中使用了 router-view 标签,来展示 layout 和其他一级路由,然后在 layout 下的 main 区域使用了一个 router-view 来展示通过菜单栏切换的子路由,下面给大家介绍Vue Router 配合 keep-alive 不生效的问题及解决方案,感兴趣的朋友一起看看吧2024-01-01
最新评论