vue中命名规则
组件命名规则
单文件组件命名:
- 组件名应该由多个单词构成,不能为单个单词
- 多个单词构成时,可以用大驼峰命名,也就是单词首字母大写(例如:【MyName.vue】),或者用单词间用横线分开,单词全部小写(例如:【my-name.vue】)
- 应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头,比如 Base、App 或 V。例如:【BaseButton.vue、BaseInput.vue、BaseTable.vue】
- 不接受任何 prop的,也就是不会进行复用的组件,应该以 The 前缀命名,以示其唯一性。例如:【TheHeading.vue、TheSidebar.vue】
- 和父组件紧密耦合的子组件应该以父组件名作为前缀命名,例如:父组件【TodoList】,那么子组件【TodoListItem】,子组件的子组件【TodoListItemButton】
- 组件名中的单词顺序,组件名应该以高级别的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾,例如:【SearchButtonClear.vue,SearchButtonRun.vue】
- 组件自闭合标签,在html文件中,并不支持vue组件的自闭合标签,但由脚手架构建的vue项目是可以用自闭合标签的。
export default {name: 'MyComponent', // ...}
必须使用驼峰命名;Vue.component('MyComponent', {})
和Vue.component('my-component'', {})
驼峰命名和横线命名均可- 组件名应该倾向于完整单词而不是缩写
prop中变量的命名规则
不要使用横线命名
props: {
greeting-text: String
}
应该像下面这样
props: {
greetingText: String
}
使用时推荐如下:
<WelcomeMessage greeting-text="hi"/>