1、Vue组件的命名规则
lower-kebab-case命名规则的约束条件如下。
（1）名字中的所有字符采用小写。
（2）名字中的单词以符号“-”隔开，如my-component-name。
upper-camel-case命名规则也称为pascal-case命名规则，约束条件为：名字中的每个单词的首字母都采用大写，如MyComponentName。
组件的模板按照定义的位置区分，可分为两种：外置模板和在组件的template选项中定义的模板。在这两种模板中引用其他组件的命名规则时会有一些区别，参见表1。
■ 表1 在模板中引用组件的命名规则
从表1可以看出，无论组件的名字采用lower-kebab-case还是upper-camel-case命名规则，在外置模板中总是使用lower-kebab-case命名规则。这是因为HTML语言不区分大小写，在外置模板中采用lower-kebab-case命名规则，可以避免组件名字与现在及将来的HTML元素的名字发生冲突。
以下代码按照upper-camel-case命名规则定义了一个名为MyComponentName的组件。
app.component('MyComponentName', {
/* ... */
})在父组件的template选项指定的模板中，可以按照lower-kebab-case或upper-camel-case命名规则使用以上名为MyComponentName的组件，例如：
const app=Vue.createApp({
…
//upper-camel-case命名规则
template:'<MyComponentName></MyComponentName>'
})或者
const app=Vue.createApp({
…
//lower-kebab-case命名规则
template:'<my-component-name></my-component-name>'
})如果是在外置模板中使用以上名为MyComponentName的组件，那么只能采用lower-kebab-case命名规则，例如：
<div id="app">
<my-component-name></my-component-name >
</div>假如在外置模板中插入组件，Vue反而不能识别：
<div id="app">
<!-- Vue认为是未定义的组件 -->
<MyComponentName></MyComponentName>
</div>对于组件的属性和事件，它们的名字可以遵守lower-kebab-case或者lower-camel-case命名规则。lower-camel-case命名规则的约束条件为：名字中第一个单词的首字母小写，其余单词的首字母大写。例如，nameOfStudent符合lower-camel-case命名规则， name-of-student符合lower-kebab-case命名规则。
表2列出了在模板中引用组件的属性的命名规则，这一规则也适用于组件的事件。
■ 表2 在模板中引用组件的属性的命名规则
