vue学习日记---prop命名格式

今天在学习的过程中遇到了一个坑，vue在父向子传值的过程中props命名格式问题

<body>
<div id="app">
<blog-post :post-title="title"></bolg-post>
</div>
<script>
   Vue.component('blog-post', {
    props: {
    'post-title': String
},
template: `<div><h3>{{post-title}}</h3></div>`
});
new Vue({
el: '#app',
data: {title: Vue.js}
})
</script>
</body>

贴上以上代码，结果控制台会出现以下错误

image

通过错误可以知道在解析template中的post-title将他解析为post和title两个参数了，然而我们只希望拿到post-title,这就得用驼峰命名法来写template中的参数了,只需要将post-title换成postTitle就可以渲染出来啦!