vue3中给页面设置name？

Question

在vue2中，通过设置name即可

请问，我如何在vue3中给该页面设置name，并且获取该页面的name信息

Answer 1

我的方法:

<script>
export default {
    name: "test",    
}
</script>

<script setup>
// ...
</script>

个人感受，setup语法糖有很严重的热更新bug，还不如老实的用 export default

Answer 2

vue3单文件组件，如果使用组合式API，组件的文件名会被默认为组件的name属性。

vue3.3版本之前可以这样自定义组件名，需要写两个script

<script>
export default {
    name: "test",    
}
</script>

<script setup>

</script>

vue3.3之后，提供了defineOptions这个API

<script setup>

defineOptions({
  name:'test',
})
</script>

Answer 3

https://www.cnblogs.com/liujunhang/p/17008927.html

Answer 4

1. 设置组件的 name
   在 Vue 3 中，您可以像在 Vue 2 中一样在组件对象中设置 name 选项：

   import { defineComponent } from 'vue';
   
   export default defineComponent({
     name: 'MyComponentName',
     setup() {
    // ... 其他逻辑
     }
   });
   

2. 获取组件的 name 信息
   在 Vue 3 的组件内部，您可以通过 getCurrentInstance 方法获取到当前组件实例。然后，可以从该实例中访问 name 信息：

import { getCurrentInstance } from 'vue';

export default defineComponent({
  name: 'MyComponentName',
  setup() {
    const instance = getCurrentInstance();
    if (instance) {
      console.log(instance.type.name);  // 输出: "MyComponentName"
    }

    // ... 其他逻辑
  }
});