Vue中的命名方式

组件命名的两种方式

1、kebab-case (短横线分隔符) eg: 'my-component-name' <my-component-name>

2、PaselCase(首字母大写)eg: 'MyComponentName' <my-component-name> <MyComponentName> 两种都可以 但是在dom里面，只有<my-component-name>这种可以

 

Prop的大小写

html的特征名会全部转化为小写 如果camelCase(驼峰命名)的prop名，在dom里面要写成kebab-case

eg:Vue.component('blog-post',{

     props:['postTitle'],

    template:'<h3>{{postTitle}}</h3>'

})

<blog-post post-title="abc"></blog-post>

如果使用字符串模板，这个限制就不存在

 

事件名

不存在任何自动化的大小写转化。推荐始终使用kebab-case的事件名

如果触发了一个camelCase名字的事件 this.$emit('myEvent') 

在dom里面，<my-component v-on:my-event="doSomething"></my-component>

监听这个名字的camelCase版本不会有任何效果 v-on事件监听器在dom模板会自动转换为全小写 v-

v-on:myEvent 会 变成 v-on:myevent 导致myEvent监听不到

 

所以 推荐始终使用kebab-case的事件名