1、Vue组件的命名规则

lower-kebab-case命名规则的约束条件如下。

（1）名字中的所有字符采用小写。

（2）名字中的单词以符号“-”隔开，如my-component-name。

upper-camel-case命名规则也称为pascal-case命名规则，约束条件为：名字中的每个单词的首字母都采用大写，如MyComponentName。

组件的模板按照定义的位置区分，可分为两种：外置模板和在组件的template选项中定义的模板。在这两种模板中引用其他组件的命名规则时会有一些区别，参见表1。

■ 表1 在模板中引用组件的命名规则

以下代码按照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 在模板中引用组件的属性的命名规则