vue gets component instance
Optionally get component instance
In the option expression, you can directly thisobtain the component instance through and thisaccess various methods of the instance object through
//该组件实例管理的 DOM 根节点。
this.$el
//表示组件当前已解析的 props 对象。
this.$props
//数据
this.$data
//父组件实例
this.$parent
//根组件实例
this.$root
//插槽对象
this.$slots
//一个包含 DOM 元素和组件实例的对象
this.$refs
//其他属性:https://cn.vuejs.org/api/component-instance.html
Get component instance from combination
In combined use, the code is written in the setup function. You cannot obtain thisthe component instance. You need to use getCurrentInstance()the method. getCurrentInstance()The instance object obtained is different from the optional component instance.
<script lang='ts'>
import {
defineComponent,getCurrentInstance} from 'vue';
export default defineComponent({
setup(props, {
attrs, slots, emit, expose }) {
const instance = getCurrentInstance()
}
})
</script>
An instance object containing $ that is the same as the optional expression
The attributes of the instances in the option formula all contain $symbols. In the composite formula, you need to use proxythis object to obtain the instance in the option formula. That is to say, the instance object in the option formula is a member of the composite instance object in the composite formula proxy. variable
const instance = getCurrentInstance()
const proxy = instance.proxy
//该组件实例管理的 DOM 根节点。
proxy.$el
//表示组件当前已解析的 props 对象。
proxy.$props
//数据
proxy.$data
//父组件实例
proxy.$parent
//根组件实例
proxy.$root
//插槽对象
proxy.$slots
//一个包含 DOM 元素和组件实例的对象
proxy.$refs
//其他属性:https://cn.vuejs.org/api/component-instance.html
//true
console.log(instance.parent.proxy == instance.proxy.$parent);
Problem with ctx attribute of instance object
The ctx attribute of the instance in the combination cannot be obtained in the production environment. In other words, if you want to obtain the context object, you should setupobtain it in the function.
Wrong approach
//开发环境能获取，但在生产中ctx为空
const {
ctx } = getCurrentInstance() //×
Correct approach
setup(props,ctx){
}
getCurrentInstance is marked as non-public APIs
https://github.com/vuejs/docs/issues/1422, although getCurrentInstanceit is a non-public API, you can still use it because it is an internal instance and can still be used when you develop the vue component library.
It cannot be found in the official documentation of Vue getCurrentInstance()because this method is an internal method.
Because the instance is an internal instance that exposes non-public APIs. Anything you use from that instance can technically break between any release types, since they are not subject to semver constraints.
I’m not sure why you need the setup context in nested composables, but explicitly passing arguments to composables make then less coupled to the consuming component, thus easier to understand and test in isolation.
In general a library designed to work with Composition API should expose special variables via its own composables (e.g.
useRoutefromvue-router) instead of the requiring the user to grab it from the instance.