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
【JS用法】js判断字符串是否包含某个字符串
【JS用法】js判断字符串是否包含某个字符串
1112 0
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中,实现文件批量下载是常见需求。例如文档管理系统或图片库应用中,用户可能需要一次性下载多个文件。本文介绍了三种技术方案:1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载;2) 借助后端接口完成文件压缩与传输;3) 使用`StreamSaver`解决大文件下载问题。同时,通过在线教育平台的实例详细说明了前后端的具体实现步骤,帮助开发者根据项目需求选择合适方案。
1185 0
|
存储 JavaScript 前端开发
vue在页面使用Vue.prototype全局变量
【6月更文挑战第3天】Vue.prototype 是 Vue 实例的原型对象,用于添加全局属性和方法。通过修改 Vue.prototype,所有 Vue 实例都能访问这些属性和方法。例如,可在 mai
877 1
|
JavaScript
vue组件封装 | 数字输入框(限制只能输入数字的input,可以指定小数点位数,最大值、最小值)
vue组件封装 | 数字输入框(限制只能输入数字的input,可以指定小数点位数,最大值、最小值)
885 7
|
资源调度 JavaScript
Vue2拖拽插件(vuedraggable)
这篇文章介绍了如何在Vue 3框架中使用`vuedraggable`插件来实现拖拽功能,并提供了插件的安装、配置和事件处理的示例。
1996 1
Vue2拖拽插件(vuedraggable)
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
29104 154
|
JavaScript
vite-plugin-html的使用及实现
【8月更文挑战第4天】vite-plugin-html的使用及实现(实现一个简易版的插件)
1964 4
|
JavaScript
ElementUI的el-dialog弹窗修改设置可拖拽可最大化
该方案通过自定义Vue指令实现ElementUI的`el-dialog`弹窗的拖拽和最大化功能。只需在`main.js`中引入并注册指令,然后在Vue组件中绑定指令即可。支持自定义参数控制是否允许最大化和拖拽,并提供最大化后的回调函数。具体使用方法详见示例代码。
3324 0
ElementUI的el-dialog弹窗修改设置可拖拽可最大化
2025为何众多用户偏爱阿里云国际版
阿里云国际版与国内版有何不同?国际版面向全球市场,域名采用英文结构,无需实名登记和备案,适合快速部署海外业务。两者在产品功能、服务器节点及售后服务上保持一致。通过指定经销商购买国际版,可享独立账户、自行选配、简化注册流程及更优惠价格。快来了解并分享你的看法吧!
2531 0