Vue3手册译稿

[info]这个章节认为你已经掌握组件基础。如果你对组件还不熟悉，请先学习。

组件名称

组件注册时需要指定一个名称。例如全局注册时：

const app = Vue.createApp({...})

app.component('my-component-name', {
  /* ... */
})

app.componet第一个参数就是组件名称。上面示例中组件名称为my-component-name。
组件名称取决于你想使用它的位置。直接在DOM中使用一个组件（字符模板和独立文件中的组件是截然不同的），强烈建议组件标签名称遵循W3C规范：

1. 全部小写
2. 包含连字符（例如包含多个单词时使用一个连隔符）

这样做可以避免与当前模板或其他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了。