Vue3组合式API之getCurrentInstance详解

前言

getCurrentInstance 是 Vue 3.x 中 Composition API 的一个常用钩子函数，它可以在组件函数内获取当前组件实例的上下文，便于我们使用其它 Composition API。

使用方法

在组件函数内调用 getCurrentInstance 即可获取当前组件实例的上下文。

import { getCurrentInstance } from "vue";

export default {
  setup() {
    const instance = getCurrentInstance();
    console.log(instance);
  }
}

当前组件实例的上下文包含了该组件的所有实例属性、方法等，我们可以通过它访问到组件内部的所有数据和方法。

示例1：通过 getCurrentInstance 获取 props 数据

在 Vue 2.x 中，我们可以通过 this.$props 来直接访问父组件传递的 props 数据。在 Vue 3.x 中，如果我们想要获取 props 数据，可以通过 getCurrentInstance 来访问上下文中的 vnode 属性，然后通过 vnode.props 获取 props 数据。

import { getCurrentInstance } from "vue";

export default {
  props: {
    message: String
  },
  setup() {
    const instance = getCurrentInstance();
    console.log(instance.vnode.props.message);
  }
}

示例中，我们定义了一个 message 属性作为 props，然后在 setup 函数中通过 getCurrentInstance 获取当前组件实例的上下文，访问上下文中的 vnode 属性，进而获取组件的 props 数据。

示例2：通过 getCurrentInstance 接收子组件触发的事件

在 Vue 3.x 中，子组件想要向父组件传递数据，可以通过 emit 实现。而在父组件中，我们可以通过 @ 或 v-on 的方式来接收 emit 的数据。但是，在某些场景下，我们需要在父组件中，动态地监听子组件的事件，此时就可以通过 getCurrentInstance 来接收子组件触发的事件。

import { getCurrentInstance } from "vue";

export default {
  components: {
    Child
  },
  setup() {
    const instance = getCurrentInstance();
    const handleChildClick = () => {
      console.log("child click");
    }
    instance.proxy.$on("childClick", handleChildClick);
  }
}

示例中，我们定义了一个 Child 子组件，在组件实例中通过 $emit 触发了自定义事件 childClick，然后在父组件中通过 getCurrentInstance 获取组件实例的上下文，并使用 $on 动态地监听子组件触发的 childClick 事件，当事件被触发时，执行相应的回调函数。

总结

getCurrentInstance 是 Vue 3.x 中 Composition API 中的一个常用钩子函数，它可以在组件函数内获取当前组件实例的上下文，便于我们使用其它 Composition API。在平时开发中，可以依靠 getCurrentInstance 来事半功倍，更加快速地开发 Vue 3.x 应用程序。