Vue3组件中getCurrentInstance()获取App实例，但是返回null解决办法

最新推荐文章于 2025-03-29 09:30:00 发布
最新推荐文章于 2025-03-29 09:30:00 发布
阅读量9k 收藏 7
点赞数 14
分类专栏： HTML前端 文章标签： vue3 app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44786530/article/details/130831878
版权

我在一个按钮点击函数里面获取APP实例的时候，返回的竟然是null： 

在页面上点击按钮后： 

 这个问题的根本原因是：getCurrentInstance() ，还有诸如： useStore 、 useRouter 这些跟 Vue 实例沾边的都会有这个问题，这些函数只能写到setup函数里面，不能套在别的函数里面使用。

当我把getCurrentInstance写在外层setup里面之后就可以正常获取到了：

页面上正常获取到了：

vue3中的getCurrentInstance()函数,为什么要解构出proxy，因为proxy是响应式对象，要用响应式对象
Frank_colo的博客
11-14 1125
1.getCurrentInstance函数只能写在生命周期钩子函数里，不能写在除生命周期之外的普通函数里，写了拿到的是null。，这个对象里还有ctx和proxy,这两个都是对象，但是这两个对象不同。
vue3获取vue实例 并注册全局属性方法
Jet_Lover的博客
08-13 1682
在使用 Vue 时，多个地方使用同一个方法导致每个地方都需要按需引用，从而增加代码量。然而，这种做法实际上有助于减少冗余、提高一致性，并且是代码重用、抽象或模块化的体现。这种方法提高了代码的维护性、可读性和一致性。注：自动导入Vue Composition API 函数（如 ref, reactive, computed 等）可以使用插件组件全局注册可以参考官网vue3组件全局注册，或者使用插件Vue3 MaskerFan 博客园。
前端 - vue3 - - getCurrentInstance详解以及为什么不推荐使用
最新发布
yky1071442177的博客
03-29 739
鱿鱼原话：直接访问实例会绕过vue3的响应式系统 不符合vue3的中心思想（解耦和复用性），getCurrentInstance已经在最新的文档说明中移除 是因为它作为一个内部api 不应该被公开使用 只会用于vue3生态中某些测试库 
hook 中getcurrentinstance() 返回值为Null 拿不到全局上下文对象的问题
weixin_44180190的博客
07-28 6030
这样就可以正确拿到当前上下文对象，因为js文件在加载的时候就已经读取了一遍，无法准确获取当前的上下文对象。简而言之，获取全局上下文，route之类的必须在setup内获取。报错写法hook.js。
vue3:全局API(应用实例)
qq_39460057的博客
02-29 1235
应用一个全局 mixin (适用于该应用的范围)。一个全局的 mixin 会作用于应用中的每个组件实例。如果只传递一个名字，则会返回用该名字注册的组件 (如果存在的话)。如果同时传递一个名字和一个指令定义，则注册一个全局指令；如果只传递一个名字，则会返回用该名字注册的指令 (如果存在的话)。每个应用实例都会暴露一个 config 对象，其中包含了对这个应用的配置设定。一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。提供一个值，可以在应用中的所有后代组件中注入使用。卸载一个已挂载的应用实例。
FacesContext.getCurrentInstance() 返回NULL
爱代码 爱生活
10-31 6716
<br />FacesContext facesContext=FacesContext.getCurrentInstance();<br /> <br />这句代码报错，百思不得求解<br /> <br /><br /> <br />解决方法：<br /><form name="form1" action='<c:urlvalue="/sys_permission/psetprivilege.faces"/>'method="post"><br /><input type="hidden" id = "r
vue3 报错 Cannot destructure property ‘proxy‘ of ‘getCurrentInstance(...)‘ as it is null.
肖肖肖丽珠的博客
09-02 1403
我是这么写的 import {computed,onMounted,ref,getCurrentInstance, ComponentInternalInstance } from "vue"; import { useRoute } from 'vue-router'; const route = useRoute(); const login=()=>{ if(thisRoute=="/home/index"){ const { proxy } = getCurrentIn
vue3遇到问题集合
HDdgut的博客
08-15 851
注意：需要将接收的props作用在setup的顶层，不能放到setup生命周期里面（defineProps 第1点）attrs：值为对象，包含组件外部传递过来，但没有在props配置中声明的属性。1.props：值为对象，包含：组件外部传递过来。切组件内部声明接收了的属性。emit：分发自定义事件的函数，相当于this.$emit。2.context ：上下文对象。：收到的插槽内容，相当于。
vue中的面包屑导航组件实例代码
10-16
首先，我们看第一个实例代码，该实例使用了element-ui框架中的`<el-breadcrumb>`和`<el-breadcrumb-item>`组件，通过在Vue的单文件组件中定义模板、脚本和样式。 在`<template>`部分，我们定义了面包屑的HTML结构。...
解析 Vue 中的app.version、 app.provide 与 app.runWithContext ：原理、应用与实例剖析
前端基地
08-12 1157
本篇博文深入且详尽地阐述了 Vue 当中的 app.version、app.provide 以及app.runWithContext 。通过清晰明了的介绍，并结合经典的案例分析，引领读者迅速且全面地熟悉这一应用实例的使用方法，从而在实际开发中能够得心应手地运用相关知识。
《Vue3 四》Vue 的组件化
花铛
12-28 318
使用kebab-case短横线分隔符。// 使用// 定义使用PascalCase大驼峰标识符。// 使用。在原生 HTML 文件中这么写是无效的，因为 HTML 不区分大小写；不过在 Vue 文件中就没有这个问题了// 定义。
vue3.x 组件间传参
木木木森林
09-03 3130
父组件给子组件传最好的方式用： props，插槽，$parent
vue3+ts 使用 getCurrentInstance 报错解决
qq_43532275的博客
11-10 7442
vue3+ts 使用 getCurrentInstance 报错解决
Vue3之App
多看多听多总结
01-10 3619
Vue3之App
vue3的getCurrentInstance获取组件实例踩坑记录
热门推荐
jieyucx的博客
10-25 1万+
我们可以通过 getCurrentInstance这个函数来返回当前组件的实例对象,也就是当前vue这个实例对象；。在Vue3中，可以用来获取当前组件实例访问组件实例的属性：可以通过或来获取当前组件实例的属性。例如，可以使用访问组件的 props 属性。调用组件实例的方法：可以通过或来调用当前组件实例的方法。例如，可以使用来触发组件的自定义事件。在生命周期钩子中使用：可以在组件的生命周期钩子中使用来获取当前组件实例，以便在钩子函数中访问组件实例的属性或调用组件实例的方法。
获取 Vue 实例及其访问方法
DevWizard的博客
10-03 1056
在 Vue.js 中，我们经常需要获取 Vue 实例以访问其属性和方法。本文将介绍如何获取 Vue 实例，并探讨几种访问实例的方法。
在 Vue3 中获取组件实例的常见方法
繁若华尘的博客
02-22 1286
在 Vue3 中获取组件实例的方法取决于你的使用场景（组合式 API 或选项式 API）以及是否需要获取当前组件实例或子组件实例
vue3获取当前组件实例的 getCurrentInstance 方法
一个超爱喝可乐的web前端攻城狮
10-26 6700
vue3获取当前组件实例的 getCurrentInstance 方法 Vue3获取当前组件实例的 getCurrentInstance 方法上 ctx 生产获取不到 上面的全局方法 其实这个 ctx 就是为了便于在开发模式下通过控制台检查的，生产环境，无法获取全局上挂载的方法。不要依赖 ctx 方法去获取组件实例来完成一些主要功能，否则在项目打包后会报错。解决办法是用proxy代替ctx. 代码如下 vue组件中调用全局方法 import { getCurrentInstance } from "vu
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值。
在js文件中获取vue3组件的实例
05-31
在 Vue 3 中，可以使用 `ref` 和 `setup` 函数来获取组件实例。 假设我们有以下组件： ```vue <h1 ref="titleRef">{{ title }} <button @click="increment">{{ count }} import { ref } from &#39;vue&#39;; ...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

1024小神

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值