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命名形式

    原文作者:开发小白——Liderder
    原文地址: https://blog.csdn.net/weixin_45460053/article/details/123519367
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞