Merge branch '29973-kebab-case-documentation' into 'master'
Adds entry about kebab case props in documentation Closes #29973 See merge request !10208
This commit is contained in:
commit
bfa659bb55
1 changed files with 11 additions and 4 deletions
|
@ -200,7 +200,6 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns.
|
||||||
#### Naming
|
#### Naming
|
||||||
- **Extensions**: Use `.vue` extension for Vue components.
|
- **Extensions**: Use `.vue` extension for Vue components.
|
||||||
- **Reference Naming**: Use PascalCase for Vue components and camelCase for their instances:
|
- **Reference Naming**: Use PascalCase for Vue components and camelCase for their instances:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
import cardBoard from 'cardBoard';
|
import cardBoard from 'cardBoard';
|
||||||
|
@ -218,15 +217,23 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns.
|
||||||
cardBoard: CardBoard
|
cardBoard: CardBoard
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
- **Props Naming**: Avoid using DOM component prop names.
|
- **Props Naming:**
|
||||||
|
- Avoid using DOM component prop names.
|
||||||
|
- Use kebab-case instead of camelCase to provide props in templates.
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
<component class="btn">
|
<component class="btn">
|
||||||
|
|
||||||
// good
|
// good
|
||||||
<component cssClass="btn">
|
<component css-class="btn">
|
||||||
```
|
|
||||||
|
// bad
|
||||||
|
<component myProp="prop" />
|
||||||
|
|
||||||
|
// good
|
||||||
|
<component my-prop="prop" />
|
||||||
|
```
|
||||||
|
|
||||||
#### Alignment
|
#### Alignment
|
||||||
- Follow these alignment styles for the template method:
|
- Follow these alignment styles for the template method:
|
||||||
|
|
Loading…
Reference in a new issue