vue 组件 prop

手册

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

<div id="app">
<!-- 在 HTML 中是 kebab-case 的 -->
    <blog-post post-title="hello"></blog-post>
</div>

<script>
    Vue.component('blog-post', {
 // 在 JavaScript 中是 camelCase 的
        props: ['postTitle'],
        template: '<h1>{{ postTitle }}</h1>',
    });
    new Vue({
        el: '#app',
    })
</script>

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