2024年4月1日发(作者：)

vue组件name命名规则

Vue组件的命名规则可以采用小写并且短横隔开（lower-kebab-

case）或者大写并且驼峰式（upper-camel-case）的命名规则。

具体来说，lower-kebab-case命名规则的约束条件是名字中的

所有字符采用小写，并且名字中的单词以符号“-”隔开，例如“my-

component-name”。upper-camel-case命名规则也称为pascal-case

命名规则，约束条件是名字中的每个单词的首字母采用大写，例如

“MyComponentName”。

在模板中引用组件的命名规则有一些区别。在外置模板中，总是

使用lower-kebab-case命名规则，这是因为HTML语言不区分大小

写，采用lower-kebab-case命名规则可以避免组件名字与现在以及

将来的HTML元素的名字发生冲突。而在父组件的template选项指定

的模板中，可以按照lower-kebab-case或upper-camel-case命名规

则来使用组件，例如：

php

或者：

php

需要注意的是，如果是在外置模板中使用组件，那么只能采用

lower-kebab-case命名规则，例如：

php

如果在外置模板中插入MyComponentName组件，Vue反而不能识

别。因此，在使用Vue组件时，需要根据具体情况选择合适的命名规

则。