Vue2升级Vue3之后，可能会发现一个问题，以前Vue2中经常使用的组件名称不见了，其实Vue3默认用文件名称作为组件名，也是就是说：

MyComp.vue文件组件的名字就是MyComp，如何自定义组件名称呢？

定义组件名

Vue3也可以支持类似选项式API那样的格式，可以和以前一样定义组件名，也可以用组合式语法定义

setup函数

直接用name属性来定义组件名称

<script>
import { ref } from 'vue'
export default {
  name: 'MyCompName',
  setup() {
    const count = ref(0)
    return { count }
  }
}
</script>

setup语法糖

setup语法糖模式下，可以用defineOptions来定义组件名称

<script setup>
   defineOptions({
    name:'MyCompName1'
   })
</script>

动态定义组件名

无论怎么定义组件名称，一个组件只有一个名称，有时候我们可能需要在不同的使用场景使用同一个组件，但是要使用不同的名字，通常我们的做法是新建一个新的组件，把组件包一层，这样新的组件就是新的名称了。

属性会自动“透传”到根组件上，不会影响props传递

组件包装

<script setup>
   import MyComp from '@/views/MyComp.vue'
   // 可以不定义，文件名就是新组件名
   defineOptions({
    name:'MyCompNewName'
   })
</script>
<template>
    <MyComp />
</template>

keepalive组件缓存

在平时开发中，我们可能会用keepalive组件来缓存路由组件，每个需要重用的页面都包成新组件不太现实，因此我们需要一个动态的方式来创建新组件，并使用新的名称：

export function createNewComponent (name, component) {
  return defineComponent({
    name,
    setup () {
      const oldComponent = isFunction(component) ? defineAsyncComponent(component) : component
      return () => h(oldComponent)
    }
  })
}

使用方式如下，可以定义出新的组件，并使用新的名字：

// 在路由配置中
export default [{
    path: 'path1',
    name: 'MyCompName1',
    component: createNewComponent('MyCompName1', () => import('@/views/MyComp.vue'))
}, {
    path: 'path2',
    name: 'MyCompName2',
    component: createNewComponent('MyCompName2', () => import('@/views/MyComp.vue'))
}]