Prop 的大小写 (camelCase vs kebab-case)

HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

  1. Vue.component('blog-post', {
  2.   // 在 JavaScript 中是 camelCase 的
  3.   props: ['postTitle'],
  4.   template: '<h3>{{ postTitle }}</h3>'
  5. })
  1. <!-- 在 HTML 中是 kebab-case 的 -->
  2. <blog-post post-title="hello!"></blog-post>

重申一次，如果你使用字符串模板，那么这个限制就不存在了。