vue3 组件与API直接使用的方法详解(无需import)

概述

在Vue 3中，通过创建应用程序实例或者通过使用 defineComponent 函数可以定义组件。组件可以直接使用Vue 3的全局API和Composition API上下文。

直接使用Vue 3的全局API

Vue 3通过app.config.globalProperties属性，允许我们在全局范围内注册应用程序实例可用的属性和方法。这样我们就可以在组件内部直接访问这些属性和方法。

以下是一个简单的示例：

<template>
  <div>{{message}}</div>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      this.message = 'Hello, Vue 3!'
    })
  }
}
</script>

在上面的示例中，组件在 mounted 钩子中定义了一个 $nextTick 方法，以确保在DOM更新之后再设置组件的 message 属性的值。由于 $nextTick 是Vue 3的全局API，我们可以直接在组件内部使用它，无需导入它。

在Composition API中使用Vue 3的全局API

在Composition API中，可以使用 getCurrentInstance() 函数暴露出当前实例，并通过 $root、$parent 和 $refs 属性访问它们的祖先实例和标识符引用。

以下是一个简单的示例：

<template>
  <div ref="foo">{{$parent.message}}</div>
</template>

<script>
import {defineComponent, getCurrentInstance} from 'vue'

export default defineComponent({
  setup() {
    const instance = getCurrentInstance()
    return { instance }
  },
  mounted() {
    console.log(this.instance.$refs.foo)
  }
})
</script>

在上面的示例中，组件使用 getCurrentInstance() 函数暴露出当前实例，并通过 $parent 属性访问它们的父实例和 message 属性。同时，我们还通过 $refs 属性引用了DOM元素，并在 mounted 钩子中打印了它。

结论

Vue 3支持在组件内部直接使用Vue 3的全局API和Composition API上下文。我们可以在组件内部使用 $root、$parent 和 $refs 属性访问祖先实例和标识符引用。这种灵活性可以让我们更方便地编写Vue 3组件。