组件命名规范

给组件命名,首先考虑组件名是一个单词还是多个单词

如果是一个单词:
第一种写法(纯小写):school

<school></school>
components: {
	school: s
}

第二种写法(首字母大写):School

<School></School>
components: {
	School: s // 推荐
}

如果是多个单词:
第一种写法(kebab-case命名):my-school

<my-school></my-school>
components: {
	'my-school': s
}

第二种写法(CamelCase命名):MySchool(需要Vue脚手架支持)

<MySchool></MySchool>
components: {
	MySchool: s // 推荐
}

注意:

不要使用html中已经有的元素名称,例如:h1等;
可以使用name配置项指定组件在开发者工具中呈现的名字;

Vue 3组件命名规范并没有强制性的规定,但遵循一定的命名习惯可以帮助提高代码的可读性和一致性。以下是社区中常用的一些Vue组件命名规范建议: 1. 单文件组件(SFC)文件的命名应该使用短横线分隔的小写单词(kebab-case)。例如,`MyComponent.vue`。 2. 组件的标签名(在单文件组件中定义的`<script>`标签内的`name`选项)也建议使用短横线分隔的小写单词,这样可以保持与文件名的一致性。例如: ```javascript export default { name: 'my-component' } ``` 在这个例子中,组件的标签名会是`<my-component>`。 3. 大小写混合的PascalCase命名方式(首字母大写的驼峰命名法)也是可行的,特别是在JavaScript代码中引用组件时。例如: ```javascript import MyComponent from './MyComponent.vue'; ``` 在这种情况下,引用组件时使用的是PascalCase命名。 4. 在模板中使用组件时,遵循与组件标签名相同的命名规范。如果使用短横线分隔的小写单词命名,则在模板中也应该这样使用;如果使用PascalCase,则模板中也使用PascalCase。 5. 避免使用保留的HTML标签名,如`<div>`、`<span>`等,作为自定义组件的名字,以免造成混淆。 6. 如果组件是复数形式,则标签名也应该使用复数形式。例如: ```html <user-profiles></user-profiles> ``` 7. 组件命名应尽量具有描述性,能够直观地表达组件的功能或内容,避免使用无意义的命名。 8. 对于全局组件,建议在组件名前加上前缀,如`Base`、`App`或`Global`等,以区分全局组件和局部组件。例如: ```javascript export default { name: 'BaseButton' } ``` 遵循这些规范可以使得Vue项目中的组件命名更加规范和一致,便于团队协作和代码维护。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值