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

已于 2023-02-28 10:15:37 修改
阅读量461 收藏
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端 vue
于 2023-02-28 10:06:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47930439/article/details/129255505
版权
Vue3 如何挂载全局方法 和用getCurrentInstance代替this
摘要由CSDN通过智能技术生成

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

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

或者

根据上面的引入文件创建路径

我的路径是在  ./assets/js/ 下面的js

common.js页面

 

最低0.47元/天 解锁文章
liuqiqi-677
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3 挂载全局对象
weixin_59685936的博客
05-30 339
Vue3 挂载全局对象
vue3---getCurrentInstance
qq_46199553的博客
11-16 1万+
方式一、通过 getCurrentInstance 方法获取当前组件实例，从而获取 route 和 router。方式二：通过从路由中导入 useRoute useRouter 使用 route 和 router。3.setup内部从vue中按需导出 getCurrentInstance 方法。5.通过proxy.$refs.子组件ref名.子组件内属性/方法 实现调用。4.调用getCurrentInstance方法导出proxy。1.setup语法糖中导入子组件。2.在子组件标签上绑定ref值。
Vue3中getCurrentInstance()方法
最新发布
weixin_51396911的博客
02-01 4027
是 Vue.js 3 Composition API 中的一个函数，它的作用是获取当前组件的实例对象。监听组件生命周期钩子：获取到组件的实例对象后，您可以通过实例对象上的生命周期钩子函数来监听组件的生命周期事件，如。，您可以在组件中像访问普通对象一样访问和修改响应式属性，而无需手动追踪属性的变化。对象是一个代理对象，它会将数据访问和修改的操作转发给真实的响应式数据。，可以获取到组件的实例对象，从而可以访问和调用组件实例上定义的方法。，可以直接访问和修改组件的响应式数据，而不需要手动使用。
Vue3核心之getCurrentInstance
chensunxu的博客
04-02 5119
2、使用：由vue提供，按需引入：import { getCurrentInstance} from 'vue'1、概述：一个很重要的方法，获取当前组件的实例、上下文来操作router和vuex等。
Vue3中getCurrentInstance()方法详解
Dennis_nafla的博客
10-22 6416
proxy只是一个变量名，翻译过来是“代理”的意思。
Vue3组合式API：getCurrentInstance
Zaralike的博客
07-19 1万+
vue3 getCurrentInstance API
vue组件挂载到全局方法的示例代码
10-18
主要介绍了vue组件挂载到全局方法的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue定义全局变量和全局方法的方法示例
10-18
同样，我们首先定义共用组件，然后在`main.js`中将它赋值给`Vue.prototype`的一个属性，这样所有Vue实例都可以通过`this`访问到这些全局变量和方法： ```javascript // main.js import Vue from 'vue' import App ...
vue2 全局变量的设置方法
08-27
Vue2 中设置全局变量有两种方法：全局变量专用模块和全局变量模块挂载到 Vue.prototype 里。 1. 全局变量专用模块 全局变量专用模块是以一个特定模块来组织管理这些全局量，需要引用的地方导入该模块便好。例如，...
在vue里面设置全局变量或数据的方法
11-28
实例如下： const MyPlugin = { ...此方法可以单独起一个文件，在引入到需要的页面里面，就可以用vue实例取到相应数据，像以下use后，取数据时和取每个模块里面的data里面的数据方法是一样的 import MyPligin from
Vue中建立全局引用或者全局命令的方法
08-29
在 Vue 中建立全局引用或者全局命令可以通过多种方式实现，包括使用 Vue.use() 方法、创建全局命令、使用 Mixins、将插件或模块赋予 Vue 的原型上、将变量挂在 window 对象上等等。这些方法可以使得我们的应用程序...
vue3的getCurrentInstance获取组件实例踩坑记录
时清云的博客
01-09 2187
而 vue 相关生态的使用其实就是他们内部的事情了，他们有完善的测试用例可以跑测试，但是我们并没有，如果后续的某一个版本Vue变更了这个API，那么如果没有经过完整测试就部署上去的项目就会出现大规模的BUG反馈了。，getCurrentInstance 的返回值是一个组件实例对象，可以通过 .ctx 来访问该实例的上下文对象，或者通过 .proxy 来访问该实例的代理对象。两者的区别在于，通过 .ctx 访问的是真实的组件实例，而通过 .proxy 访问的是一个代理对象，该代理对象可以在模板中直接使用。
Vue3组合式API之getCurrentInstance详解（在行为验证码之滑动验证AJ-Captcha遇到在开发环境可以，测试环境报错）
m0_52263688的博客
11-01 1677
ctx和proxy都是getCurrentInstance()对象中的属性，通过解构赋值的方式拿到。但是在Vue3中，在setup中无法通过this获取组件实例的。所以在Vue3中，我们可以通过getCurrentInstance()来获取当前组件实例。首先大家知道我们可以通过 getCurrentInstance这个函数来获取当前组件的实例对象,也就是当前vue这个实例对象。由于本人在使用AJ-Captcha插件的过程中发现在开发环境调试正常，但是测试环境会报错，获取不到组件实例。开发中只适用于调试！
vue3中getCurrentInstance不推荐使用以及在＜script setup＞中获取全局内容(三种方式)
阿飞的博客
10-23 8849
官方解说： 在 setup() 内部，this 不会是该活跃实例的引用（即不指向vue实例），因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。因为setup的生命周期是在beforeCreate，created之前执行的 我们在beforeCreate时保存的this，所以要在beforeCreate之后获取，onBeforeMount是在beforeCreate之后执行的 所以可以获取到 note。
Vue3.x核心之getCurrentInstance
qq_43654065的博客
04-06 6042
这一章简单介绍下Vue3.x中的核心方法，用于访问实例上下文的router及vuex等。 1、概述：一个很重要的方法，获取当前组件的实例、上下文来操作router和vuex等。 2、使用：由vue提供，按需引入：import { getCurrentInstance} from 'vue'; import { getCurrentInstance } from 'vue'; // 获取当前组件实例 const instance = getCurrentInstance(); // 获取当前组件的上下
vue3.0之全局变量app.config.globalProperties的使用
m0_67391401的博客
03-01 3005
globalProperties 类型：[key: string]: any 默认：undefined 用法 添加一个可以在应用的任何组件实例中访问的全局 property。组件的 property 在命名冲突具有优先权。 这可以代替 Vue 2.x Vue.prototype 扩展： // 之前(Vue 2.x) Vue.prototype.$http = () => {} // 之后(Vue 3.x) const app = Vue.createApp({}) app.config.glo
vue3.0 挂载全局api 和 全局自定义方法 或 Provide、inject全局变量和方法
热门推荐
agua001的博客
02-09 1万+
注册全局方法，使用两种方式挂载，两种方式在组件中拿到全局方法并且使用
vue3全局挂载和使用
qq_60607143的博客
09-06 1282
引入getCurrentInstance构子函数获取app实例对象，进行结构出来，从而获取vue组件实例上的挂载对象。1.全局挂载（在main.ts或者main.js文件下）使用globalProperties进行挂载。
vue 全局挂载所有方法
05-01
Vue是一款流行的前端开发框架，它提供了一些便捷的工具和API，方便开发人员进行前端开发。其中，全局挂载是Vue框架的一种...因此，我们应该在必要的时候才使用全局挂载方法和属性，保证代码的整体结构清晰、易于维护。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值