Vue3手册译稿 - 深入组件 - 组件注册
[info]这个章节认为你已经掌握组件基础。如果你对组件还不熟悉，请先学习。
组件名称
组件注册时需要指定一个名称。例如全局注册时：
const app = Vue.createApp({...})
app.component('my-component-name', {
/* ... */
})
app.componet第一个参数就是组件名称。上面示例中组件名称为my-component-name。
组件名称取决于你想使用它的位置。直接在DOM中使用一个组件（字符模板和独立文件中的组件是截然不同的），强烈建议组件标签名称遵循W3C规范：
- 全部小写
- 包含连字符（例如包含多个单词时使用一个连隔符）
这样做可以避免与当前模板或其他HTML命名起冲突。你可以了解其他关于组件命名规范风格手册。
名称大小写
当在字符串或独立文件中定义模板时，组件名有两个选项：
使用短横线分隔
app.component('my-component-name', {
/* ... */
})
当使用短横线隔定义组件名时，标签名也同时使用短横线分隔，例如<my-component-name>。
使用Pascal命名法
app.component('MyComponentName', {
/* ... */
})
使用Pascal命名法时，自定义标签使用<my-component-name>和<MyComponentName>都是可以的。注意只有在短横线分隔才会在DOM中是有效的（例如非字符串模板）。
全局注册
前面我仅使用app.component创建过组件：
Vue.createApp({...}).component('my-component-name', {
// ... options ...
})
这种是在应用中全局注册的，意味着你可以在这个应用组件实例的模板中使用它：
const app = Vue.createApp({})
app.component('component-a', {
/* ... */
})
app.component('component-b', {
/* ... */
})
app.component('component-c', {
/* ... */
})
app.mount('#app')
<div id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>
在子构件中同样适用，意味着这三个组件内部也能互相调用。
本地注册
全局注册有时不是一个好主意。例如你使用构建系统如webpack等，全局注册意味着你即使停止使用这个组件，仍然会被包含在最终的构建生成中。当用户下载时这非必要的增加增加了JavaScript大小。
这种情况下，你可以像定义JavaScript对象一样定义组件：
const ComponentA = {
/* ... */
}
const ComponentB = {
/* ... */
}
const ComponentC = {
/* ... */
}
当需要使用组件时才进行引入：
const app = Vue.createApp({
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
组件对象的每个属性，关键字就是自定义元素的名称，值包含了组件的所有选项对象。
需要注意的是，本地注册在子构建内部不能互相调用（不可用）。例如你想在ComponentB中使用ComponentA你需要这样做：
const ComponentA = {
/* ... */
}
const ComponentB = {
components: {
'component-a': ComponentA
}
// ...
}
或者你使用ES2015，webpack中的Babel，看起来可能更像：
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA //ComponentA: ComponentA
}
// ...
}
注意ES2015+，ComponentA其实是ComponentA:ComponentA的缩写，意思变量名同时：
- 模板中使用的自定义组件名，同时
- 变量名包含了组件选项
模块导入系统
如果你未使用import,require，你可以跳过此章节。本章节针对这种场景介绍特殊用法和提示。
使用模块导入系统管理本地注册组件
如果你使用了类似webpack的Babel模块导入系统，建议创建一个components目录，每个组件都建立一个独立的文件。
本地注册前，然后你可以按需要导入需要使用的组件。例如，假设在ComponentB.js或ComponentB.vue中：
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
}
// ...
}
这样一来，当前模板中就可以使用ComponentA和ComponentC了。
