vue获取组件实例

vue获取组件实例

选项式获取组件实例

在选项式中可以直接通过

this

来获取组件实例，通过

this

来访问实例对象的各种方法

//该组件实例管理的 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

组合式中获取组件实例

在组合式用，代码都写在setup函数中，无法通过

this

获取组件实例，需要通过

getCurrentInstance()

方法，

getCurrentInstance()

获取的实例对象和选项式获取组件实例不同

<scriptlang='ts'>import{ defineComponent,getCurrentInstance}from'vue';exportdefaultdefineComponent({setup(props,{ attrs, slots, emit, expose }){const instance =getCurrentInstance()}})</script>

和选项式相同的含$的实例对象

在选项式中的实例的属性都含

$

符号，在组合式中需要通过

proxy

这个对象来获取选项式中的实例，也就是说选项式中的实例对象在组合式中，属于是组合式实例对象的

proxy

成员变量

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);

实例对象的ctx属性问题

在组合式中实例的ctx属性在生产环境中是无法获取的，也就是说，想获取上下文对象，应该在

setup

函数中获取

错误做法

//开发环境能获取，但在生产中ctx为空const{ ctx }=getCurrentInstance()//×

正确做法

setup(props,ctx){}

getCurrentInstance被标记为non-public APIs

https://github.com/vuejs/docs/issues/1422，尽管

getCurrentInstance

是非公开API但是你依旧可以使用它，因为它是内部实例，在你开发vue组件库时依旧可以使用。

在vue的官方文档中找不到

getCurrentInstance()

,是因为这方法是内部方法

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.

useRoute

from

vue-router

) instead of the requiring the user to grab it from the instance.