Prop大小写
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的值可以是以下原生构造函数之一：
| String | Number | Boolean | Array | Object | Date | Function | Symbol |
|---|
type也可以使用自定义的构造函数：
function Person (firstName, lastName) {this.firstName = firstNamethis.lastName = lastName
}
Vue.component('blog-post', {props: {author: Person}
})
Non-Prop Attributes
non-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 2
- vm.$attrs
