【Vue】全局变量的定义及使用

这篇具有很好参考价值的文章主要介绍了【Vue】全局变量的定义及使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

首先声明Vue使用全局变量的方法有很多,以下只是个人觉得比较简洁的2种。其中两者的第一步操作相同,即:

创建全局变量文件Global.vue,内容如下:

<script>
    const name = 'ZhangSan'; //名称
    const address = 'No.20, Taihu Road'; //地址

    export default {
        name,
        address
    }
</script>

方法1:在main.js中直接将全局变量挂载到Vue.prototype

import global from '../components/xx/Global'
Vue.prototype.GLOBAL = global;

用时不用任何多余操作,直接调用this.GLOBAL.name即可。

方法2:在需要使用全局变量的页面引入global再使用

import global from '../components/xx/Global'
data() {
        return {
                userName: global.name,
                userAddress: global.address
        }
}

第一步:单独新建一个全局变量模块文件,模块中定义一些变量初始状态,用export default 暴露出去。

vue 全局变量,方法,vue,vue.js,javascript,前端
vue 全局变量,方法,vue,vue.js,javascript,前端

// 判断是否显示logo
const logo = true;
export default {
  logo
};

第二步:在main.js中引入,并通过Vue.prototype挂载到vue实例上面。供其他模块文件使用;

vue 全局变量,方法,vue,vue.js,javascript,前端

// 全局环境变量
import showLogo from '../public/showLogo.js'
Vue.prototype.$showLogo = showLogo;

第三步:在需要的模块文件中引入并使用;

vue 全局变量,方法,vue,vue.js,javascript,前端

页面使用

vue 全局变量,方法,vue,vue.js,javascript,前端文章来源地址https://www.toymoban.com/news/detail-517091.html

到了这里,关于【Vue】全局变量的定义及使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue中自定义.js变量

    order.js文件内容: // 订单是否报账 const EXPENESS_STATUS_NO=0; const EXPENESS_STATUS_YES=1; // 状态 0-未发货 1-发货 2-确认收获 const STATUS_NO=0; const STATUS_SEND=1; const STATUS_DELIVERY=2; //  如何不加这个,vue中引入不进来变量值 export {     EXPENESS_STATUS_NO,     EXPENESS_STATUS_YES,     STATUS_NO,     STAT

    2024年02月13日
    浏览(40)
  • vue及js中使用function及箭头函数定义方法

    目录 1.函数声明,使用function 2.函数表达式,使用function 3.使用箭头函数方式 4.函数构造器 5.总结 1.函数声明,使用function 2.函数表达式,使用function 3.使用箭头函数方式 4.函数构造器 5.总结 在vue中,我们通过v-on指定来绑定要指定的方法,可以使用function或const箭头函数的方式

    2024年02月05日
    浏览(49)
  • JavaScript保留字和预定义的全局变量及函数汇总

    保留字也称,每种语言中都有该语言本身规定的一些,这些都是该语言的语法实现基础,JavaScript中规定了一些标识符作为现行版本的或者将来版本中可能会用到的,所以当我们定义标识符时就不能使用这些了,下面介绍下JavaScript保留

    2024年01月16日
    浏览(61)
  • vue3.0全局变量app.config.globalProperties的使用

    app.config.globalProperties是一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。是Vue2中Vue.prototype使用的一种替代,具体用法如下: 1、在组合式api使用: 2、在选项api中使用:

    2024年02月11日
    浏览(33)
  • Vue3使用全局函数或变量的两种常用方式

    例如:想要在index.ts中创建getAction函数,并可以全局使用: 方式一:使用依赖注入(provide/inject) 在main.ts中进行挂载: 在要使用的页面注入: 方式二:使用 app.config.globalProperties 和 getCurrentInstance() app.config.globalProperties:一个用于注册能够被应用内所有组件实例访问到的全局

    2024年02月12日
    浏览(45)
  • IIS部署vue前端过程(含IIS及相关配置和安装),部署遇到的问题及报错(承接vueconfig.js全局配置环境变量,跨域问题)

    目录 一.IIS使用安装。 二.部署准备工作 三.部署前端(以vue为主) 四.问题与报错 1.HTTP 错误 404.0 - Not Found(需重写路由入口) 2.请求调用不了(需要重写请求地址) 3.地址显示undefined 第一步,打开“ 控制面板 ”,点击“ 网络和Internet ”。 第二步,点击左侧“ 程序 ”,然后点击

    2024年02月08日
    浏览(69)
  • vue项目根据不同环境动态配置接口请求ip及全局变量(vue环境变量配置)

    在项目的开发过程中,我们常常会遇到根据不同的环境需要切换不同的ip的问题,例如在项目部署到测试服时需要将接口请求ip替换成测试服的ip,部署到正式服时又需要将接口请求ip替换成正式服对应的ip,有些公司还有预发环境等,这样在每次部署不同环境的项目前都需要先手

    2024年02月02日
    浏览(55)
  • 在 Vue.js 中,使用 watch 监听data变量如:对象属性/data变量

    在 Vue.js 中,使用 `watch` 监听对象属性 的变化时,应该将属性名作为 字符串 传递给 `watch` 选项。 示例如下: ```javascript updateAddChuZhenForm函数 现在,当 `isCheck1` 或 `isCheck2` 的值发生变化时,相应的 `watch` 函数将被触发。 ``` 如果你想要 监听一个普通变量 ,而 不是 Vue 实例的属

    2024年02月09日
    浏览(45)
  • 五、全局scss变量定义及使用

    定义 variable.scss 存放全局变量 配置 在vite.config.ts文件配置如下: @import \\\"./src/styles/variable.less\\\"; 后面的 ; 不要忘记,不然会报错 ! 使用 直接使用 使用暴露的变量名

    2024年02月19日
    浏览(40)
  • 若依vue前端有全局用户信息变量吗

    \\\"若依\\\"是一个基于SpringBoot和Vue的前后端分离的开源项目。在前端Vue部分,全局用户信息通常保存在Vuex中,Vuex是Vue.js的状态管理模式。它提供了一个集中式存储来管理所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 在若依系统中,全局用户信息通常

    2024年02月14日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包