vue怎么定义全局变量和全局方法
本篇内容介绍了“vue怎么定义全局变量和全局方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
一、给vue定义全局变量
1.定义专用模块来配置全局变量
定义一个专用模块来配置全局变量,然后通过export暴露出去,在需要的组件引入global.vue
// 定义一些公共的属性和方法
const httpUrl = 'http://test.com'
// 暴露出这些属性
export default {
httpUrl,
}
引入及使用
<script>
// 导入共用组件
import global from './global.vue'
export default {
data () {
return {
//使用
globalUrl: global.httpUrl
}
}
}
</script>
2.通过全局变量挂载到Vue.prototype
同上,定义一个专用模块来配置全局变量,然后通过export暴露出去,在需要的组件引入global.vue
// 定义一些公共的属性和方法
const httpUrl = 'http://test.com'
// 暴露出这些属性
export default {
httpUrl,
}
在main.js中引入并复制给vue
// 导入共用组件
import global from './global.vue'
Vue.prototype.global = global
组件调用
export default {
data () {
return {
// 赋值使用, 可以使用this变量来访问
globalHttpUrl: this.global.httpUrl
}
}
3.使用vuex
安装:
npm install vuex --save
新建store.js文件
import Vue from 'vue'
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state:{ httpUrl:'http://test.com' }
})
main.js中引入
import store from './store'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
});
组件内调用
console.log(this.$store.state.httpUrl)
二、给vue定义全局方法
1.将方法挂载到 Vue.prototype 上面
简单的函数可以直接写在
文件里定义。main.js
// 将方法挂载到vue原型上
Vue.prototype.changeData = function (){
alert('执行成功');
}
使用方法
//直接通过this运行函数,这里this是vue实例对象
this.changeData();
2. 利用全局混入 mixin
新建一个mixin.js文件
export default {
data() {
},
methods: {
randomString(encode = 36, number = -8) {
return Math.random() // 生成随机数字,
.toString(encode) // 转化成36进制
.slice(number)
}
}
}
// 在项目入口 main.js 里配置
import Vue from 'vue'
import mixin from '@/mixin'
Vue.mixin(mixin)
// 在组件中使用
export default {
mounted() {
this.randomString()
}
}
3. 使用插件方式
文件,文件位置可以放在跟plugin.js
同一级,方便引用main.js
exports.install = function (Vue, options) {
Vue.prototype.test = function (){
console.log('test');
};
};
main.js
引入并使用。import plugin from './plugin'
Vue.use(plugin);
所有的组件里就可以调用该函数。
this.test();
相关内容
这些是最新的
热门排行
- THINKPHP5+GatewayWorker+Workerman 开发在线客服系统
- 在手机浏览器网页中点击链接跳转到微信界面的方法
- 尊云网站目录系统 ThinkPHP5网站分类目录程序 v2.2.221011
- CentOS 7安装shadowsock(一键安装脚本)
- AdminTemplate 基于LayUI 2.4.5实现的网站后台管理模板
- 用NW.js(node-webkit)开发多平台的桌面客户端
- PHP生成随机昵称/用户名
- THINKPHP5网站分类目录程序 尊云网站目录系统
- 织梦(DEDECMS)微信支付接口 微信插件
- 基于LayUI开发的 网站后台管理模板 BeginnerAdmin
- 响应式后台网站模板 - AMA.ADMIN
- layuiAdmin后台管理模板 Iframe版
- LayUI 1.0.9 升级 至 LayUI 2.1.4 方法
- 简洁清爽的会员中心模板
- jQuery幸运大转盘抽奖活动代码