一、在哪里命名
组件里面的name属性？不是。
<script>
export default {
name: 'HelloWorld'
};
</script>
组件文件的名称？也不是。
<template>
<InitPage />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
components:{
InitPage:HelloWorld
}
};
</script>
你得知道你得在什么地方命名，这是最基本的。
vue2
对于vue来说，不是文件的名称，也不是import后面的那个名称，而是components的属性名称，平时我们的写的直接用的import后面的名称是因为，ES6的写法，属性名称直接就是import后面的那个名称啦。所以名称是下面这样的。
vue3
对于vue3来说，最开始没有defineOptions Api，所以当时的方案是写两个script标签。具体为什么这样，这里就不具体详细聊。
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
InitPage: HelloWorld
}
}
</script>
<script setup>
</script>
<template>
<InitPage />
</template>
但是这样很烦，然后有的用了插件来解决。但是都很麻烦。所以后面vue3提供了多个definexxx api。而可以解决这个问题api 就是defineOptions
<script setup>
import HelloWorld from './components/HelloWorld.vue'
defineOptions({
name: 'App',
components: {
InitPage: HelloWorld
}
})
</script>
<template>
<InitPage />
</template>
二、命名和用法
你想给组件定义怎样的名字，这个话题已经很多讨论了，多的就不聊了。
大驼峰命名的时候，可以在使用的时候使用大驼峰和小横线。而且可以使用ES6的语法，直接赋值给components。
小横线命名的时候，只能用小横线。不能使用ES6语法
components: {
'hello-world': HelloWorld
}
