Vue3实现挂载全局方法和用getCurrentInstance代替this

 更新时间:2025年04月19日 08:43:12   作者:发奋图强_lee  
这篇文章主要介绍了Vue3实现挂载全局方法和用getCurrentInstance代替this,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue3挂载全局方法和用getCurrentInstance代替this

平时我们在开发vue项目的时候,要把一些函数、方法、组件或插件挂在全局上方便项目上每一个页面或模块调用,在vue2.x的时候,在main.js只要用Vue.prototype就能完成,之后在页面上用this来调用,如:

main.js:

调用

在vue3.0的时候挂在全局方法就不一样,通过 app.config.globalProperties来挂载,如挂载axios:

方法一

但是切记挂载任何东西之前不能createApp(App)后面不能连缀use()或mount('#app'),如:

或者

方法二

把封装的函数和api挂载在全局变量install方法里,之后导出

在main.js 引入,

但是在vue3.0的时候如果用组合api,由于 setup 在生命周期 beforecreate 和 created 前执行,此时 vue 对象还未创建,因无法使用我们在 vue2.x 常用的 this。

那就用 getCurrentInstance代替this,首先引入,之后声明如下:

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue使用wangEditor实现自定义粘贴功能

    Vue使用wangEditor实现自定义粘贴功能

    这篇文章主要为大家详细介绍了Vue如何使用wangEditor实现自定义粘贴功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-12-12
  • vue新建项目并配置标准路由过程解析

    vue新建项目并配置标准路由过程解析

    这篇文章主要介绍了vue新建项目并配置标准路由过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • vue 文件切片上传的项目实现

    vue 文件切片上传的项目实现

    本文主要介绍了vue 文件切片上传的项目实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • vue中watch和computed为什么能监听到数据的改变以及不同之处

    vue中watch和computed为什么能监听到数据的改变以及不同之处

    这篇文章主要介绍了vue中watch和computed为什么能监听到数据的改变以及不同之处,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • 使用vue实现HTML页面生成图片的方法

    使用vue实现HTML页面生成图片的方法

    这篇文章主要介绍了使用vue实现HTML页面生成图片的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • 解决vue中数据更新视图不更新问题this.$set()方法

    解决vue中数据更新视图不更新问题this.$set()方法

    这篇文章主要介绍了解决vue中数据更新视图不更新问题this.$set()方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue2.X组件学习心得(新手必看篇)

    vue2.X组件学习心得(新手必看篇)

    下面小编就为大家带来一篇vue2.X组件学习心得(新手必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • vue中的计算属性传参

    vue中的计算属性传参

    这篇文章主要介绍了vue中的计算属性传参,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue前端开发辅助函数状态管理详解示例

    vue前端开发辅助函数状态管理详解示例

    vue的应用状态管理提供了mapState、mapGetters、mapMutations、mapActions四个辅助函数,所谓的辅助函数分别对State、Getters、Mutations、Actions在完成状态的使用进行简化
    2021-10-10
  • vue通过elementUI组件实现图片预览效果

    vue通过elementUI组件实现图片预览效果

    我们在开发中经常会遇到通过点击某个按钮或者文字实现图片的预览功能,这里我们分别介绍vue2和vue3里面如何实现图片预览方法,需要的朋友可以参考下
    2023-09-09

最新评论