Vue 3 中如何获取类似 Vue2 的 this

MerkleJqueryRu2024-03-19 15:32

在 Vue 3 中，获取组件实例与 Vue 2 中略有不同。Vue 3 引入了一些新的 API 来处理组件实例，其中包括 getCurrentInstance() 函数。在本篇博客中，我们将学习如何在 Vue 3 中获取当前组件的实例。

首先，让我们简单回顾一下在 Vue 2 中获取组件实例的方式。在 Vue 2 中，你可以通过 this 关键字来访问当前组件的实例。例如，你可以使用 this.$data 来访问组件的数据，或者使用 this.$emit() 来触发事件。但在 Vue 3 中，this 不再指向组件实例，而是指向上下文对象。因此，我们需要使用新的方式来获取组件实例。

在 Vue 3 中，可以使用 getCurrentInstance() 函数来获取当前组件的实例。下面是一个简单的示例：

html 复制代码

<template>
  <div>Hello World</div>
</template>

<script setup>
import { getCurrentInstance } from "vue"

const app = getCurrentInstance()
console.log(app.appContext.app.config.globalProperties)
</script>

在这个示例中，我们在 <script setup> 中导入了 getCurrentInstance() 函数，并使用它来获取当前组件的实例。然后，我们通过 app.appContext.app.config.globalProperties 访问了全局属性。

需要注意的是，虽然在选项 API 中仍然可以使用 this 来访问组件实例，但在 Composition API 中，推荐使用 getCurrentInstance() 来获取组件实例，以避免混淆和提高代码的清晰度。

总而言之，在 Vue 3 中，你可以使用 getCurrentInstance() 函数来轻松获取当前组件的实例，从而访问其属性和方法。