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