Vue项目中组件名和props名的字母大小写总结

1. 组件名大小写

 对于绝大多数项目来说,在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。组件名应该倾向于完整单词而不是缩写。

(当然,这只是一种开发规范,或者说编码风格,实测在dom中使用大写的组件名PascalCase也不会报错)

/* good */

<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>


/* bad */

<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent></MyComponent>
<!-- 在 DOM 模板中 -->
<my-component/>

2. props名大小写

 在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 JSX 中应该始终使用 kebab-case。我们单纯的遵循每个语言的约定。在 JavaScript 中更自然的是 camelCase。而在 HTML 中则是 kebab-case。

/* good */

props: {
   greetingText: String
}
<WelcomeMessage greeting-text="hi"/>


/* bad */

props: {
   greeting-text': String
}
<WelcomeMessage greetingText="hi"/>

实话是关于props的规范,实际项目中大多不会注意。很多人的习惯都是在声明和dom中都是用camelCase

猜你喜欢

转载自blog.csdn.net/a1059526327/article/details/107855512