<commit_before>---
title: Props
type: guide
order: 102
---

> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.

## Prop Casing (camelCase vs kebab-case)

HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase. That means when you're using in-DOM templates, camelCased prop names need to use their kebab-cased (hyphen-delimited) equivalents:

``` js
Vue.component('blog-post', {
  // camelCase in JavaScript
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
```

``` html
<!-- kebab-case in HTML -->
<child post-title="hello!"></child>
```

Again, if you're using string templates, this limitation does not apply.

## Static and Dynamic Props

So far, you've seen props passed a static value, like in:

```html
<blog-post title="My journey with Vue"></blog-post>
```

You've also seen props assigned dynamically with `v-bind`, such as in:<commit_msg>Fix component name in template example (#1542)<commit_after>---
title: Props
type: guide
order: 102
---

> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.

## Prop Casing (camelCase vs kebab-case)

HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase. That means when you're using in-DOM templates, camelCased prop names need to use their kebab-cased (hyphen-delimited) equivalents:

``` js
Vue.component('blog-post', {
  // camelCase in JavaScript
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
```

``` html
<!-- kebab-case in HTML -->
<blog-post post-title="hello!"></blog-post>
```

Again, if you're using string templates, this limitation does not apply.

## Static and Dynamic Props

So far, you've seen props passed a static value, like in:

```html
<blog-post title="My journey with Vue"></blog-post>
```

You've also seen props assigned dynamically with `v-bind`, such as in:
{'fraction_non_alphanumeric': 0.12850812407680945, 'fraction_numerical': 0.006893156080748399, 'mean_word_length': 4.447721179624665, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '797781', 'n_tokens_mistral': 647, 'n_tokens_neox': 586, 'n_words': 247}