传递静态或动态Prop
传入静态的值：
<blog-post title="My journey with Vue"></blog-post>
这时候值是一个字符串
你也可以通过v-bind动态赋值：
<blog-post v-bind:title="post.title"></blog-post>
这时候值是一个js表达式
传入一个布尔值
// 包含该prop没有值的情况在内，都意味着true
<blog-post is-pushlished></blog-post>
<blog-post :is-pushlished="true"></blog-post>
传入一个对象的所有属性
如果你想要将一个对象的所有属性都作为prop传入，你可以使用不带参数的v-bind。例如，对于一个给定的对象post：
post: {
id: 1,
title: 'My Journey with Vue'
}
// 下面的模版
<blog-post v-bind="post"></blog-post>
// 等价于
<blog-post
v-bind:id="post.id"
v-bind:title="post.title"
></blog-post>
单向数据流
所有prop都使得其父子prop之间形成一个单向下行绑定：父级prop的更新会向下流动到子组件中，但是反过来不行。这样会防止从子组件意外改变父组件的状态，从而导致你的应用数据流向难以理解。
如果子组件改变引用类型的某个属性值，你会发现无法改变父组件的这个引用类型，并且也无法触发watch，但是你如果给这个对象添加一个属性和值就会改变父组件的这个对象，并且可以触发watch，如果再次改变添加的属性值那么只会触发watch，但是无法改变父组件的对象。
总结：父组件通过prop向子组件传递引用类型的值，这时候子组件是可以改变父组件通过prop传过来引用类型的值，如果是基本类型的值是不可以改变的
prop验证
Vuecomponent('my-component', {
props: {
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 是否必传，如果为true，则父组件必须要传这个值，否则报错
propC: {
type: String,
required: true
}，
// 带有默认值的对象
propD: {
type: Object,
default: () => { message: 'hello' }
},
// 自定义验证函数，如果不符合条件就会报错
propE: {
validator: (value) => {
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
注意：prop会在一个组件实例创建之前进行验证，所以实例的属性(如data、computed等)在default或validator函数中是不可用的
非prop的特性
一个非prop特性是指传向一个组件，但是该组件并没有相应prop定义的特性。
<bootstrap data-date-picker="activated"></bootstrap>
data-date-picker="activated"这个特性就会自动添加到<bootstrap>的根元素上。
替换/合并已有的特性
假如子组件<bootstrap-date-input>的模板是这样的：
<input type="date" class="form-control">
这时候我们在子组件上添加一个type和一个class：
<bootstrap-date-input type="text" class="date-picker"></bootstrap-date-input>
子组件的模版上已经有了这两个属性了，这时候我们发现子组件内部设置的type被外部的type替换成text，但是class合并成form-control和date-picker。
总结：除了class和style特性外部和内部的根元素会合并起来，其他的值会被外部替换掉
禁用特性继承
如果你不希望组件的根元素继承特性，你可以在组件的选项中设置inheritAttrs:false。例如：
Vue.component('my-component', {
inheritAttrs:false,
....
})
这尤其适合配合实例的$attrs属性使用，该属性包含了传递给一个组件的特性名和特性值。
网友评论