Vue中的一些命名规范

在重新回顾vue官网的时候，发现一些很容易被遗忘和混淆的命名规范，命名规范虽然只是一个建议，但是在一个项目中混乱的使用多种命名形式，这样看起来无疑是十分糟糕和头疼的，今天就拿出来一起总结一下。

一、单文件组件文件的大小写

单文件组件的文件名应该要么始终是单词大写开头（PascalCase），要么始终是横线连接（kebab-case）。例如这样：

components/
| - MyComponent.vue

或者是这样：

components/
| - my-component.vue

二、单例组件名

只应该拥有单个活跃实例的组件应该以 The前缀命名，以示其唯一性。 这不意味着组件只可用于一个单页面，而是每个页面只使用一次。这些组件永远不接受任何 prop，因为它们是为你的应用定制的。例如这类组件：

components/
|- TheHeading.vue
|- TheSidebar.vue

三、模版中的组件名大小写

对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。所以我认为最好的做法就是统一写成这个形式：

	<my-component></my-component>

四、JS/JSX中的组件名大小写

JS/JSX 中的组件名应该始终是 PascalCase 的，尽管在较为简单的应用中只使用 Vue.component 进行全局组件注册时，可以使用 kebab-case 字符串。像下面这样：

Vue.component('MyComponent', {
  // ...
})

Vue.component('my-component', {
  // ...
})

import MyComponent from './MyComponent.vue'

export default {
  name: 'MyComponent',
  // ...
}

五、Prop名大小写

在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。在 JavaScript 中更自然的camelCase。而在 HTML 中则是 kebab-case。

props: {
	greetingText: String
}

<WelcomeMessage greeting-text="hi"/>

六、事件名

这个与之前介绍的组件和prop都不相同，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。 举个例子，如果触发一个 camelCase 名字的事件：

this.$emit('myEvent')

则监听这个名字的 kebab-case 版本是不会有任何效果的：

<my-component v-on:my-event="doSomething"></my-component>

vue官网是这样解释的：

不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或 property 名，所以就没有理由使用 camelCase 或PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

因此，我们推荐你始终使用kebab-case 的事件名。

这里我碰到一个问题，我将一个子组件的某个事件名写成这样（记为情况1）：

this.$emit('myChange')

在父组件内写成这样：

<my-component v-on:myChange="doSomething"></my-component>

结果是：可以触发doSomething

另一种条件下，（记为情况2）：

this.$emit('mychange')

<my-component v-on:myChange="doSomething"></my-component>

结果是：不可以触发doSomething
重新看一下vue官网中说到： v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。
但是按照这个说法，结果应该是截然相反的才对…
补充
经过查阅一些博客发现了有这么一个解释：在于DOM模版和字符串模版。

字符串模板就是写在vue中的template中定义的模板，如.vue的单文件组件模板和定义组件时template属性值的模板。字符串模板不会在页面初始化参与页面的渲染，会被vue进行解析编译之后再被浏览器渲染，所以不受限于html结构和标签的命名。

dom模板就是写在html文件中，一打开就会被浏览器进行解析渲染的，所以要遵循html结构和标签的命名，否则浏览器不解析也就不能获取内容了。

七、做一些补充：

文件夹的命名：超过一个单词一般采用kebab-case命名形式