Clarify documentation in Props / Prop Casing

[DavidRueter]

I now understand that when passing props to components the HTML attributes must be kebob-case such as <my-component my-prop="abc"></my-component>

At the same time, in Javascript props may be (should be?) named in camelCase such as prop: ['myProp'] and must be referenced in JavaScript via camelCase such as x = this.myProp

The documentation at https://vuejs.org/v2/guide/components-props.html isn't quite clear about this with respect to passing values to props when using components.

I think adding a line to the documentation would have saved me several hours of debugging today. How about:

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:

This also means that when using components you must pass values via kebab-case attributes, even if the prop name is defined in camelCase. Vue will automatically know that an HTML attribute like <blog-post post-title="hello!"></blog-post> is to be accessed as this.postTitle within JavaScript code.

The clarification about remembering to pass prop as kebab-case even though the prop is defined as camelCase would have been helpful. Also, the clarification that Vue automatically allows the kebab-case prop to be accessed in in JavasScript as a camelCase identifier would likewise have helped me more quickly understand the behavior.

[ivansieder]

Hi @DavidRueter, attributes must be kebab-case only, if you are using in-DOM-templates (for example if you include Vue as a script tag and actually define component templates in the DOM with ). If you use string templates (that would be using the template property of an instance and assigning a string to it or using a build system like vue-cli does with webpack, which "loads" each .vue file and parses templates as strings before actually using it), this limitation DOES NOT apply.

So if you are using string templates, you could actually use camelCase in both HTML and JS. It's just a best practise, to use HTML conventions (kebab-case) for HTML code and JS conventions (camelCase) for JS code. But this could definitely be something that could be extended!

@chrisvfritz @defcc @Jinjiang would a PR be welcome to add some explanation on what exactly an in-DOM-template is and what a string template is? And maybe also an extension of the explanation that props being passed in string templates can be passed as someProp and some-prop, but will be converted to someProp in JS?

[phanan]

@ivansieder sure, PR's are always welcome :)

[ivansieder]

Created https://github.com/vuejs/vuejs.org/pull/1833. not that much, but hopefully helpful! :)