1.组件名

在注册一个组件的时候，我们始终需要给它一个名字。比如全局注册的时候我们已经看到该组件名就是app.component的第一个参数。对组件的命名可能与你打算在哪使用它有关，当直接在DOM中而不是在字符串模板或单文件组件中使用一个组件的时候，我们强烈推荐遵循W3C规范来给自定义标签命名。

1.1组件名大小写

在字符串模板或单个文件组件中定义组件时，定义组件名的方式有两种：

使用kebab-case：app.component('my-component-name', {}) 当使用kebab-case（短横线分隔命名）定义一个组件时，你也必须在引用这个自定义元素时使用kabab-case，例如<my-component-name>
使用PascalCase：app.component('MyComponentName', {}) 当使用PascalCase（首字母大写命名）定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用，也就是说<my-component-name>和<MyComponentName>都是可以接受的。尽管如此，直接在DOM中使用时只有kebab-case是有效的。

使用app.component来创建组件，这些组件是全局注册的，也就是说它们在注册之后可以用在任何新创建的组件实例的模板中。

全局注册往往是不够理想的，比如如果你使用一个像webpack这样的构建系统，全局注册所有的组件意味着即便你已经不再使用其中一个组件了，它仍然会被包含在最终的构建结果中，这造成了用户下载的JavaScript的无谓的增加。在这些情况下，可以通过一个普通的JavaScript对象来定义组件：

const ComponentA = {}; const ComponentB = {}; conost ComponentC = {} 然后再components选项中定义想要使用的组件：
const app = Vue.createApp({components: {'component-a': ComponentA, 'component-b': CompeonentB}}) 对于components对象中的每个property来说，其property名就是自定义元素的名字，其property值就是这个组件的选项对象。
注意局部注册的组件在其子组件中不可用
如果希望组件可以在其他子组件使用，需要在其他子组件中定义components对象：const ComponentA = {}; const ComponentB = { components: {'component-a': ComponentA}}
如果通过Babel和webpack使用ES2015模板，则要使用import from和export default {} 在ES2015+中，在对象中放一个类似ComponentA的变量名其实是ComponentA：ComponentA的缩写，即这个变量名同时是：
用在模板中的自定义元素的名称
包含了这个组件选项的变量名

如果使用了诸如Babel和webpack的模块系统，在这些情况下，推荐创建一个components目录，并将每个组件放置在其各自的文件中。然后需要在局部注册之前导入每个想使用的组件。

import ComponentA from './ComponentA'

export default {
  componetns: {
    ComponentA
    }
  }