精通Vue.js系列 │ Vue组件的命名规则

原副标题：通晓Vue.js系列产品 │ Vue模块的重新命名准则

每一Vue模块都有两个英文名字。模块的英文名字能选用lower-kebab-case（小写且短横分隔）或是upper-camel-case（小写且之字形式）重新命名准则。

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词汇不界定UTF，出内置模版中选用lower-kebab-case重新命名准则，能防止模块英文名字与那时及今后的HTML原素的英文名字发生争执。

下列标识符依照upper-camel-case重新命名准则表述了两个名叫MyComponentName的模块。

app.component( MyComponentName, {

/* … */

})

在父模块的template快捷键指定的模版中，能依照lower-kebab-case或upper-camel-case重新命名准则采用以上名叫MyComponentName的模块，例如：

constapp=Vue.createApp({

…

//upper-camel-case重新命名准则

template: <MyComponentName></MyComponentName>

})

或是

constapp=Vue.createApp({

…

//lower-kebab-case重新命名准则

template: <my-component-name></my-component-name>

})

如果是出内置模版中采用以上名叫MyComponentName的模块，那么只能选用lower-kebab-case重新命名准则，例如：

< my-component-name> </ my-component-name>

</ div>

<!– 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 在模版中提及模块的属性的重新命名准则

参考书籍