vue官方文档:
Prop 的大小写 (camelCase vs kebab-case)
HTML 中的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>
//props中传递的数据可以为驼峰式也可以为短横线式,他们在此处是相互转换的,但推荐短横线式
另外一个例子↓:
<child v-bind:my-message="message"></child>
<!--此处的my-message只能是短横线命名(若为驼峰式则全部转换为小写。)-->
以及推荐emit也遵循这样的法则:
this.$emit('event-name', data);
重申一次,如果你使用字符串模板,那么这个限制就不存在了。例如↓:
template:'<p>{{myMessage}}</p>'
// 此处有限制,是字符串模板,{{ }}语法中不能是短横线连接方式。此处只能是驼峰命名方式。