vb005-命名问题

#1.单文件组件的命名

以大写开头的驼峰命名，或者全部小写中间已中划线分割。

bad

myComponent.vue

mycomponent.vue

good：

my-component.vue

MyComponent.vue

未完待续。。。

#1.基本的组件应该加上前缀。

应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。

bad:

components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

good

components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue


components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue


components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue

紧密耦合的组件名

#和父组件紧密耦合的子组件应该以父组件名作为前缀命名

如果一个组件只在某个父组件的场景下有意义，这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起。

bad:

components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue

components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue

good:

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

####完整单词的组件名

##组件名应该倾向于完整单词而不是缩写。

bad

components/
|- SdSettings.vue
|- UProfOpts.vue

good

components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

####props名大小写推荐

##在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。

bad:

props: {
  'greeting-text': String
}

<WelcomeMessage greetingText="hi"/>

good:

props:{
	greetingText: String
}

<WelcomeMessage greeting-text="hi"/>

scope中的元素选择器

元素选择器应避免在scoped红出现。

在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。

bad:

<template>
  <button>X</button>
</template>

<style scoped>
button {
  background-color: red;
}
</style>

good:

<template>
  <button class="btn btn-close">X</button>
</template>

<style scoped>
.btn-close {
  background-color: red;
}
</style>

在事件中使用短横线命名

在发出定制事件时，最好使用短横线命名，这是因为在父组件中，我们使用相同的语法来侦听该事件。

因此，为了确保我们各组件之间的一致性，并使您的代码更具可读性，请在两个地方都坚持使用短横线命名。


this.$emit('close-window')

// 在父组件中

<popup-window @close-window="handleEvent()"/>