vue中的一些命名规则

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"/>