Prop的命名规则有camelCase，驼峰命名和kebab-case，短横线分隔。
由于HTML对大小写不敏感，所以浏览器会把大写字母解释为小写字母。
当我们使用camelCase命名prop时，在Dom中的template模板使用该prop就需要换成对应的kebab-case命名形式。
如果在字符串模板中使用，该限制就不存在。
<div id="app"><!-- kebab-case in HTML --><blog-post post-title="hello1"></blog-post><profile></profile></div><script>Vue.component('blog-post', {// camelCase in JavaScriptprops: ['postTitle'],template: '<h3>{{ postTitle }}</h3>'});Vue.component('profile',{template:`<blog-post postTitle="hello2"></blog-post>`});new Vue({el: '#app'});</script> Prop类型props可以简单地写为一个数组，但也可以使用对象的形式为每个prop指定其类型：
props: {title: String,likes: Number,isPublished: Boolean,commentIds: Array,author: Object,callback: Function,contactsPromise: Promise // or any other constructor} 传递静态或动态的Prop静态传递prop：
<blog-post title="My journey with Vue"></blog-post>使用v-bind动态传递prop：
<!-- Dynamically assign the value of a variable --><blog-post v-bind:title="post.title"></blog-post><!-- Dynamically assign the value of a complex expression --><blog-postv-bind:title="post.title + ' by ' + post.author.name"></blog-post>上述示例的post.title是字符串类型，但是我们也可以传递任何类型。
如果我们使用比如Number、Boolean、Array、Object等类型的原始值作为prop，怎么避免它们被当成字符串传递呢？使用v-bind即可。
特殊的，如果我们想要传递一个对象的所有prop而非对象本身，可以使用不带参数的v-bind：
<blog-post v-bind="post"></blog-post>等价于：
<blog-postv-bind:id="post.id"v-bind:title="post.title"></blog-post> 单向数据流数据通过prop的传递是单向的，只能从父组件传递到子组件，而无法反向传递。如果没有这种限制，那么我们就很难掌控数据流的流向。
父组件prop的更新也会刷新传递给子组件的prop。
一旦我们尝试修改父组件传递给子组件的prop，Vue会在浏览器控制台发出警告。
子组件中有两种常见的需要修改传递来的prop的情况：
用来初始化本地的prop
props: ['initialCounter'],data: function () {return {counter: this.initialCounter}}需要修改传递来的prop
props: ['size'],computed: {normalizedSize: function () {return this.size.trim().toLowerCase()}}要小心使用传递来的Object或Array类型的prop，因为会不小心修改了原数据。我们可以进行深拷贝来避免这种情况。
Prop验证 基础的类型检查null和undefined会通过任何类型验证。
props:{propA: Number} 多个可能的类型 props:{propB: [String, Number],} 必填项 props:{propc:{type: String,required: true}} 默认值 props:{propD: {type: Number,default: 100}, propE: {type: Object,// 对象或数组默认值必须从一个工厂函数获取default: function () {return { message: 'hello' }}},} 自定义验证函数 props: {propF: {validator: function (value) {// 这个值必须匹配下列字符串中的一个return ['success', 'warning', 'danger'].includes(value)}}}prop会在组件实例创建前进行验证，开发环境构建版本的Vue验证prop失败会给出浏览器控制台警告。
类型检查type的值可以是以下原生构造函数之一：
StringNumberBooleanArrayObjectDateFunctionSymboltype也可以使用自定义的构造函数：
function Person (firstName, lastName) {this.firstName = firstNamethis.lastName = lastName}Vue.component('blog-post', {props: {author: Person}}) Non-Prop Attributesnon-prop attributes是指传递给了一个组件但是该组件中没有相关定义的prop，现在叫做attributes。
一些第三方组件的设计者只会定义那些组件所必需的、常见的的prop，而其他需要额外的prop的场景就会使用non-prop attribute，这些额外的attribute会被添加到组件的root element。
替换/合并已有的Attributes通常传递给子组件的attributes会替换其已经设置好了的值，但是class和style attributes将会被合并处理。
禁用Attributes继承我们可以设置inheritAttrs: false来阻止组件的根元素继承attributes。
Vue.component('my-component', {inheritAttrs: false,// ...})接下来可以使用$attrs来获取传递给组件的所有attribute（除了class和style）。
Vue.component('base-input', {inheritAttrs: false,props: ['label', 'value'],template: `<label>{{ label }}<inputv-bind="$attrs"v-bind:value="value"v-on:input="$emit('input', $event.target.value)"></label>`}) <base-inputlabel="Username:"v-model="username"requiredplaceholder="Enter your username"></base-input>上面示例的placeholder作为non-prop attribute传递，但是我们禁用了组件根元素继承attributes，然后通过v-bind="$attrs"将class和style以外的attributes传递给了base-input。
参考资料 Props-Vue 2vm.$attrs
