Vue3使用全局函数或变量的2种常用方式代码
更新时间：2023年09月21日 11:19:47 作者：theMuseCatcher
在Vue3项目中需要频繁使用某一个方法,配置到全局感觉会方便很多,这篇文章主要给大家介绍了关于Vue3使用全局函数或变量的2种常用方式,需要的朋友可以参考下
例如：想要在index.ts中创建getAction函数，并可以全局使用：
import { http } from '@/utils/axios'
export function getAction (url: string, params: object) {
return http.request({
url: url,
method: 'get',
params: params
})
}方式一：使用依赖注入（provide/inject）
在main.ts中进行挂载：
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
import { getAction } from 'index'
app.provide('getAction', getAction) // 将getAction方法挂载到全局
app.mount('#app')在要使用的页面注入：
<script setup lang="ts">
import { inject } from 'vue'
const getAction: any = inject('getAction')
</script>方式二：使用 app.config.globalProperties 和 getCurrentInstance()
- app.config.globalProperties：一个用于注册能够被应用内所有组件实例访问到的全局属性的对象
- getCurrentInstance()：// 获取当前实例，类似于vue2的this
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
import { getAction } from 'index'
app.config.globalProperties.$getAction = getAction
app.mount('#app')在要使用的页面中使用：
<script setup lang="ts">
import { getCurrentInstance } from 'vue'
const { proxy }: any = getCurrentInstance()
console.log('proxy:', proxy)
console.log('getAction:', proxy.$getAction)
</script>总结
到此这篇关于Vue3使用全局函数或变量的2种常用方式的文章就介绍到这了,更多相关Vue3使用全局函数或变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue 文字横向无缝走马灯组件的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了vue单页面在微信下只能分享落地页的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
这篇文章主要介绍了vue中使用swiper,左右箭头点击没有效果问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了vue-router 实现导航守卫（路由卫士）的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了vue中push()和splice()的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本篇文章主要介绍了vuejs实现递归树型菜单组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
vue使用canvas画布实现平面图点位标注功能(最新推荐)
这篇文章主要介绍了vue使用canvas画布实现平面图点位标注功能,经过本文一番研究发现canvas标签可以完成很多功能，电子签名，点位标注，问题标注，画图功能，感兴趣的朋友跟随小编一起看看吧2023-07-07
Vue作为一款流行的前端框架,提供了一种数据驱动的方式来实现目录树,本文主要介绍了vue 目录树的展开与关闭的实现,具有一定的参考价值,感兴趣的可以了解一下2023-11-11
vite-plugin-svg-icons是一个Vite插件,其作用是将SVG图标文件转换为Vue组件,本文主要介绍了vue3+vite项目中显示SVG图片的实现示例,具有一定的参考价值,感兴趣的可以了解一下2024-02-02
vue中el-checkbox、el-switch绑定值问题详解
这篇文章主要给大家介绍了关于vue中el-checkbox、el-switch绑定值问题的相关资料,文中通过代码介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下2024-01-01
最新评论