如何在vue js 3.0中获取当前组件名称

<template>
  <div>
    <h1>Component Name: {{ componentName }}</h1>
  </div>
</template>

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

export default {
  setup() {
    const instance = getCurrentInstance();
    const componentName = instance?.ctx?.$options.name;

    return {
      componentName,
    };
  },
};
</script>
在Vue.js 3.0中，如果你想要获取当前组件的名称，你可以使用`setup`函数和Composition API中的`getCurrentInstance`方法。下面是如何实现的步骤：

1. 在`setup`函数中调用`getCurrentInstance`来获取当前组件实例。
2. 从实例中访问`type`属性，然后访问`name`属性来获取组件名称。

下面是一个例子：

```vue
<template>
  <div>
    <h1>Component Name: {{ componentName }}</h1>
  </div>
</template>

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

export default {
  setup() {
    // 获取当前组件实例
    const instance = getCurrentInstance();
    
    // 确保instance不为null并且type属性存在
    const componentName = instance && instance.type ? instance.type.name : 'Unknown';

    // 返回响应式数据
    return {
      componentName
    };
  }
};
</script>

export default {
  name: 'MyComponent',
  // ... 其他选项
};