Article Directory
1. Some naming concepts
kebab-case: Name separated by dash, such as my-component-name
PascalCase: Name with initial capital letters, such as MyComponentName
camelCase: CamelCase nomenclature, such as myComponentName
Second, the component name
When registering a component, we always need to give it a name. For example, when the global registration, component name is the Vue.componentfirst argument.
Vue.component('my-component-name', {
/* ... */ })
There are two ways to define component names:
1, kebab-casewith dashes named
Vue.component('my-component-name', {
/* ... */ })
When using kebab-case (name separated by dashes) to define a component, kebab-case must also be used when referencing this custom element, for example <my-component-name>.
2, using PascalCasethe first letter capitalized named
Vue.component('MyComponentName', {
/* ... */ })
When defining a component using PascalCase (name with initial capital letters), both nomenclatures can be used when referencing this custom element. That <my-component-name>and <MyComponentName>it is acceptable. Note that despite this, only kebab-case is valid when used directly in the DOM (ie non-string templates).
Third, the case of Prop
Attribute names in HTML are not case sensitive, so the browser will interpret all uppercase characters as lowercase characters. This means that when using the template in the DOM, the prop name of camelCase (camelcase nomenclature) needs to be named using its equivalent kebab-case (name separated by dashes).
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{
{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello"></blog-post>
If you use string templates, then this restriction does not exist.
Fourth, the event name of the custom event
Unlike components and props, there is no automatic case conversion for event names. Instead , the name of the triggered event needs to exactly match the name used to monitor this event.
For example, if an event with the name camelCase is triggered:this.$emit('myEvent')
Then listening to the kebab-case version of this name will have no effect:
<!-- 没有效果 -->
<my-component v-on:my-event="doSomething"></my-component>
Unlike components and props, the event name will not be used as a JavaScript variable name or property name, so there is no reason to use camelCase or PascalCase. And the v-on event listener in the DOM template will be automatically converted to all lowercase (because HTML is case-insensitive) , so v-on:myEventwill become v-on:myevent, making it impossible for myEvent to be monitored.
The official recommendation of vue is to always use the event name of kebab-case (name separated by dashes).