vue组件component、属性prop及事件的命名和引用大小写规则（vue2 & vue3）

vue2 和 vue3 下，组件和 prop的命名规则是相同的组件命名规则2.1. 当使用 kebab-case (短横线分隔，如Vue.component('my-component-name', { /* ... */ })) 定义一个组件时，你在引用这个自定义元素时也必须使用 kebab-case，则必须使用<my-component-name>引用组件2.2. 当使用 Pasc

ChristopherKeith

3739人浏览 · 2022-01-05 23:53:59

ChristopherKeith · 2022-01-05 23:53:59 发布

vue2 和 vue3 下，命名和引用规则是相同的
组件命名规则
2.1. 当使用 kebab-case (短横线分隔，如Vue.component('my-component-name', { /* ... */ })) 定义一个组件时，你在引用这个自定义元素时也必须使用 kebab-case，则必须使用<my-component-name>引用组件
2.2. 当使用 PascalCase (首字母大写，如Vue.component('MyComponentName', { /* ... */ })) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的
不同使用场景下的组件引用命名
3.1. 使用字符串模板（如template: '...'）或单文件(.vue文件)，kebab-case和PascalCase均可，即<my-component-name> 和 <MyComponentName>都可以用来引用组件
3.2 使用非字符串模板（即不属于3.1的情况），直接使用HTML的情况下，由于 HTML 是大小写不敏感的，所以只有 kebab-case 是有效的，即只能使用<my-component-name>
3.3. 命名风格推荐
对于绝大多数项目来说，在单文件组件和字符串模板中，组件名称应该始终是 PascalCase 的——但是在 DOM 模板中是 kebab-case 的。点此参考官方文档
prop命名规则
prop一般情况下使用camelCase (首字母小写，驼峰命名法，如组件内使用{props: ['myProp']})命名
不同使用场景下的prop引用命名
5.1. 使用字符串模板（如template: '...'）或单文件(.vue文件)，kebab-case和camelCase均可，即myProp 和 my-prop都可以用来传入prop
5.2. 使用非字符串模板（即不属于5.1的情况），直接使用HTML的情况下，由于 HTML 是大小写不敏感的，所以只有 kebab-case 是有效的，即只能使用my-prop
5.3. 命名风格推荐
在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
我们只是单纯地遵循了每种语言的约定。在 JavaScript 中 camelCase 更为自然。而在 HTML 中则是 kebab-case。点此参考官方文档
事件命名和引用规则与prop一致

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^