vue全局变量/全局函数


一、定义变量、并且全局使用

实现:
  1. 单独新建一个全局变量模块文件,模块中定义初始化变量,使用export default暴露出去。
  2. 在mian.js中引入,使用Vue.prototype挂载到vue示例上面,以供其他模板使用。
  3. 或者直接引入需要的模板中使用。
目录:

在这里插入图片描述
1.创建global_variable.js文件,存放全局变量:

	const userName = 'XXXX';
	const userPass = 'XXXX';
	const userCity = 'XXXX';

	export default{
		userName,
		userPass,
		userCity
	}

方法一:在需要的组件中使用(局部引入):
在这里插入图片描述
方法二:全局使用:

  • 将global_variable.js文件引入mian.js文件中,并使用Vue.prototype挂载到实例上:
    在这里插入图片描述
  • 在需要使用的组件中使用(无需引入,直接通过this使用):
    在这里插入图片描述

二、定义函数、并且全局使用

实现:
  1. 新建一个文件,后再mian.js里面通过Vue.prototype将函数挂载到Vue实例上,通过this点出来,来运行函数。
方法一:在mian.js中直接写函数

简单的函数,可以直接在mian.js中直接创建:

在这里插入图片描述

方法一:在mian.js中直接写函数

简单的函数,可以直接在mian.js中直接创建:

方法二:新建一个模块文件,挂载到mian.js中

在这里插入图片描述
1.实例代码

	function packground (param) {
		alert(param)
	}

	export default {
		install : function (Vue) {
			Vue.prototype.global_function = (param) => packground(param)
		}
	}

2.main.js文件实例:
在这里插入图片描述
3.在需要代用的组件中,使用this.输出的函数名,来进行调用:
在这里插入图片描述


  • 7
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值