在 Vue.js 3 中，如何获取当前组件的名称？

在Vue 3中获取当前组件的名称可以通过多种方式来实现，具体取决于你正在使用的是哪种编写组件的方式（例如Options API、Composition API）。以下是一些示例来解释如何在不同情景下获取组件名称：

使用 Options API

如果你正在使用Options API，你可以通过this.$options.name来访问当前组件的名称。这是一个比较传统的方式，Vue 2中也一样使用。

javascript
<template>
  <div>
    当前组件名称：{{ componentName }}
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      componentName: this.$options.name
    }
  }
}
</script>

使用 Composition API

在使用Vue 3推荐的Composition API时，获取组件名称可以通过getCurrentInstance方法。getCurrentInstance方法返回当前组件的实例，你可以从中获取到很多实例相关的信息，包括组件名称。

javascript
<template>
  <div>
    当前组件名称：{{ componentName }}
  </div>
</template>

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

export default {
  setup() {
    const instance = getCurrentInstance();
    const componentName = ref(instance?.type.name);

    return {
      componentName
    }
  }
}
</script>

注意

• getCurrentInstance()方法应谨慎使用，主要是为了工具库或高级功能的开发者设计的。官方推荐在常规应用开发中避免过度依赖此方法，因为它可能会让组件的逻辑变得与组件树的结构耦合。
• 在生产模式下，组件的名字可能会被压缩工具修改，所以如果依赖组件名进行逻辑处理需要谨慎。

以上就是在Vue 3中获取当前组件名称的一些方法。希望这对你有帮助!