所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。不应该在一个子组件内部改变 prop，Vue 会在浏览器的控制台中发出警告。

props传参，子组件接受到undefined的可能情况之一是因为大小写问题，因为 HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 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>

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

原文地址：https://cn.vuejs.org/v2/guide/components-props.html