（
（推荐）不管是单标签还是双标签，全部使用 kebab-case 格式，主要是为了方便。
<!--全部使用kebab-case格式-->
<my-component />
<my-component></my-component>
7、prop名称的大小写
在子组件html中传入prop的为kebab-case格式，子组件接收方采用 camelCase 格式。
// 错误
<welcome-message greetingText="hi"/>
props: {
'greeting-text': String
}
// 正确
<welcome-message greeting-text="hi"/>
props: {
greetingText: String
}
8、组件事件命名
统一使用 kebab-case 格式，并且以动词结尾。
// 正确
this.$emit('dom-resize');
this.$emit('api-load');
命名总结
1、采用kebab-case命名的：
-
文件夹
-
单文件组件
-
组件在html模板中使用（
<my-component></my-component>） -
在模板中prop传入属性到子组件（
<my-componnet set-text="hello"/>） -
所有事件名（
this.$emit('api-reload')）
2、采用PascalCase命名：
-
公共基础组件（
MfcSelect） -
js中components注册组件时（
import MyComponent from './my-component.vue'） -
组件的name属性（
name: 'MyComponent'）
3、采用camelCase 命名：
- 子组件接收prop属性
props: {
setText: String
}
Q&A
Q：为什么有些命名看起来既可以PascalCase又可以kebab-case的，都选择了kebab-case？
A：因为如果有很多同时使用kebab-case的话，比较方便记忆，仅此而已。