Vue3 Getcurrentinstance

Posted on  by admin

Modified1 month ago.

In vue 2+ I can easily get the instance of this as a result I can write something like this,.

What should I do for vue 3 as,.

Inside setup(), this won't be a reference to the current activeinstance Since setup() is called before other component options areresolved, this inside setup() will behave quite differently from thisin other options.

This might cause confusions when using setup() alongother Options API.

Muhammad LahinMuhammad Lahin. Vue 3 provides getCurrentInstance() inside the setup() hook. That instance allows access to global properties (installed from plugins) via appContext.config.globalProperties:. 1414 gold badges141141 silver badges200200 bronze badges.

axios.ts

200200 bronze badges. 上一篇文章:快速使用Vue3最新的15个常用API(1W5+字详解,建议收藏),我向大家介绍了关于Vue3常用的15个API的使用详情,帮助大家快速上手Vue3,也很高兴收到大家的支持,同样也有一些人提出了疑问,尤其是对于 如何获取当前组件实例 这个问题的讨论最为激烈,这里我们就对其进行一些补充.

在Vue2的各个组件中,我们频繁地使用 this ,即获取当前组件实例,是因为每个组件的数据变量、方法都要通过组件实例去获取。.

在上面这段代码中很清晰的看到,首先在 data 中声明了两个响应式数据,分别为 name 、age;同时定义了一个方法 increase,该方法是将 age 的值 +1;在当前组件挂载后,调用 increase 方法.

无论是获取数据 age,还是获取方法 increase,我们都是从 this,即当前组件实例中获取的. 而到了Vue3,大部分甚至可以说全部的关键代码都集中写在了 setup 函数内,并且在该函数内是无法通过 this 获取到当前组件实例的,那是因为所有的变量、方法都可以直接使用.

这段代码与上一段代码功能一模一样,但从始至终都没有通过组件实例去获取数据变量或方法,这无疑减少了很多的重复代码,例如多次使用 this,想必Vue3的初衷也不需要我们去获取当前组件实例.

但是上一篇文章讲到的 getCurrentInstance 这个方法确实是可以获取到组件实例的,如图. 但这只有在 development,即开发环境下才能获取到当前组件的实例,换句话说就是这个方法只是在开发环境下用于调试使用的;.

很明显,在 ctx 中根本没有看到当前组件实例的影子,而只有一个 _,我们点进去看看里边是什么,如图所示.

Similar Posts: