Vue2使用全局函数或变量的两种常用方式

简介: 这篇文章介绍了在Vue 2项目中实现全局函数或变量的两种常用方式:一种是通过挂载到Vue的`prototype`,另一种是使用Vue的全局混入(Vue.mixin)。

①在index.js中创建getAction函数,并全局使用:

export function getAction (url, parameter) {

  return request({

    url: url,

    method: 'get',

    params: parameter

  })

}

②创建globalUse.js:

  • 方式一挂载到Vue**.prototype**:
import { getAction } from './index'

import Vue from 'vue'

Vue.getAction = getAction // 使用时需先引入Vue,然后调用:Vue.getAction

Vue.prototype.$getAction = getAction // 使用:this.$getAction
  • 方式二使用全局混入Vue.mixin**:**
import { getAction } from './index'

Vue.mixin({ data () { return { getAction } } }) // 全局混入到data中,使用:this.getAction

// Vue.mixin({ methods: { getAction } }) // 全局混入到methods中,使用:this.getAction

③在main.js中引入globalUse:

import Vue from 'vue'

import App from './App.vue'

import './utils/globalUse'

new Vue({

  render: h => h(App)

}).$mount('#app')
相关文章
|
JavaScript 前端开发
uniapp如何定义全局变量?
uniapp如何定义全局变量?
690 0
|
JavaScript 索引
【vue】element ui 实现动态表单点击按钮新增行/删除行
【vue】element ui 实现动态表单点击按钮新增行/删除行
3675 0
|
JavaScript
Vue~在线预览doc、docx、pdf、img文件
Vue~在线预览doc、docx、pdf、img文件
7086 0
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
9180 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
存储 JavaScript
vue项目中定义全局变量、函数的几种方法
vue项目中定义全局变量、函数的几种方法
565 1
|
缓存 前端开发 JavaScript
浅浅阅读umi中InitialState插件源码 - 杨磊
InitialState插件源码的简要介绍
1223 0
浅浅阅读umi中InitialState插件源码 - 杨磊
|
JavaScript
Vue3使用全局函数或变量的两种常用方式
这篇文章介绍了Vue 3中实现全局函数或变量的两种方法:一种是使用`provide/inject`进行依赖注入,另一种是利用`app.config.globalProperties`和`getCurrentInstance()`来注册全局属性。
1873 2
Vue3使用全局函数或变量的两种常用方式
|
移动开发 JavaScript HTML5
el-input限制输入整数等分析
本文介绍了在Vue中限制el-input只能输入整数的几种方式,包括设置type为number,使用inputmode属性,自定义指令,计算属性,使用onafterpaste和onkeyup事件以及使用el-input-number的precision属性。每种方式都有其优缺点,可以根据实际需求选择合适的方式。比较建议用自定义指令的方式来实现。
2247 0
el-input限制输入整数等分析
|
资源调度 JavaScript 前端开发
Vue2项目使用v-viewer插件实现图片预览、切换、缩放、旋转...
这篇文章介绍了在Vue 2项目中如何通过`v-viewer`插件实现图片的预览、切换、缩放、旋转等功能,并提供了插件的安装、配置和使用方法。
3748 0
Vue2项目使用v-viewer插件实现图片预览、切换、缩放、旋转...
|
12月前
|
Java
vue2知识点:vuex中四个map方法的使用,包括:mapState、mapGetters、mapMutations、mapActions
vue2知识点:vuex中四个map方法的使用,包括:mapState、mapGetters、mapMutations、mapActions
722 1