Vue模板中组件名（自定义标签）使用

模板中使用的自定义组件的命名同时支持PascalCase（驼峰命名） 和 kebab-case （连字符分隔命名）两种规则，即<MyComponent>或<my-component>。
具体的选择使用哪种命名方式有以下几种情况（三方UI组件库以at-ui为例）。
首先这里指的命名跟.vue的文件名，亦或自定义组件里的属性name指定的名称是无关的，单纯是讲在模板template里如何使用自定义的组件名。

1. import MyComponent from MyComponent.vue 单纯导入组件

<template>
  <div>
    <MyComponent title="<MyComponent> as label name"></MyComponent>
    <my-component title="<my-component> as label name"></my-component>
  </div>
</template>

import MyComponent from MyComponent.vue
...
// 采用局部注册时，在 components 选项中定义你想要使用的组件
components: {    
    MyComponent
},
...

2. components 对象中的每个属性名就是自定义元素的名字，其属性值就是这个组件的选项对象，因此可以在components中为组件指定其他的名称。如果按照PascalCase方式命名，则<MyComponent>和<my-component>都是可用的；如果按照kebab-case 命名，则只能使用<my-component>
3. 导入组件时指定别名，模板中使用的名称为别名，其他使用方式与规则1相同

import {
  Table as AtTable,
  Button as BtButton
} from 'at-ui';

<template>
  <div>
    <AnyButton >AnyButton as label name</AnyButton >
    <any-button>any-button as label name</any-button>
    <AtTable :columns="columns1" :data="data1"></AtTable>
    <at-table :columns="columns1" :data="data1"></at-table>
  </div>
</template>

components: {
    AnyButton,
    AtTable,
 },