Adds entry about kebab case props in documentation
This commit is contained in:
parent
a9b1a85bed
commit
8913d27cf8
|
@ -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 New Issue