IT俱乐部 JavaScript Vue3实现挂载全局方法和用getCurrentInstance代替this

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,首先引入,之后声明如下:

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持IT俱乐部。

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/js/15162.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部