Vue3如何获取this|极客教程

Vue3如何获取this

在Vue3中，获取this上下文的方法和Vue2有所不同。在Vue3中，你可以通过getCurrentInstance()函数来获取this，以访问Vue组件实例中的属性和方法。本文将详细讲解如何在Vue3中获取this。

getCurrentInstance()函数

在Vue3中，getCurrentInstance()函数是用来获取当前组件实例的。通过这个函数，你可以访问组件实例的属性和方法。值得注意的是，getCurrentInstance()函数只能在组件的setup函数中使用。下面是一个示例：

import { getCurrentInstance } from 'vue';

export default {
  setup() {
    const instance = getCurrentInstance();

    console.log(instance);

    return {};
  }
}

在上面的示例中，我们通过import { getCurrentInstance } from 'vue';引入getCurrentInstance函数，然后在组件的setup()函数中调用getCurrentInstance()函数来获取当前组件实例。最后我们通过console.log(instance)打印出组件实例。

通过`thisProxy`对象获取`this`

在Vue3中，我们还可以通过thisProxy对象来获取this上下文。thisProxy对象是Vue3新增的一个特性，用于提供更方便的访问组件实例的方法。下面是一个示例：

<template>
  <button @click="logMessage">Click me</button>
</template>

<script>
export default {
  setup() {
    const logMessage = () => {
      console.log(thisProxy.message); // 访问数据
    }

    return { logMessage };
  }
}
</script>

在上面的示例中，我们通过thisProxy.message来访问组件的数据。这种方式更直观和简洁，可以避免混淆和错误。

示例代码

下面我们通过一个完整的示例来演示如何在Vue3中获取this：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="logMessage">Click me</button>
  </div>
</template>

<script>
import { getCurrentInstance } from 'vue';

export default {
  setup() {
    const instance = getCurrentInstance();
    const message = 'Hello Vue3';

    const logMessage = () => {
      console.log(instance.proxy.message);
    }

    return { message, logMessage };
  }
}
</script>

在上面的示例中，我们首先通过getCurrentInstance()函数获取到当前组件实例，然后定义了一个名为message的数据。通过logMessage函数，我们可以在控制台中打印出message的值。