所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
一、父组件向子组件传参，
1.先将要prop传递的数据绑定在子组件在父组件中的实例里。
2.然后子组件里设置props进行数据接受，
3.并通过文本插值放入组件中。
【父组件】
<template>
<div>
我是父组件,姓{{firstName}}
<son :firstName="firstName"></son> //绑定要传递给子组件的参数
</div>
</template>
<script>
import Son from '../components/son'
export default {
components: {
Son}, //引入子组件
data () {
return {
firstName: '张'}}} //原信息
</script>
【子组件】
<template>
<div>我是子组件,我姓{{firstName}}</div> //插值
</template>
<script>
export default {
props: { //接收父组件传来的数据，并指定类型
firstName: {
type: String,
required: true
}},}
</script>
二、注意：子组件中v:bind绑定的都是表达式而不是字符串。
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:author="{ name: 'Veronica', company: 'Veridian Dynamics' }"></blog-post>
三、prop一次传对象的多个值
如果想将一个对象的所有属性都作为prop传入，可以使用不带参数的v-bind。例如
<blog-post v-bind="post"></blog-post>
等价于
<blog-post
v-bind:id="post.id"
v-bind:title="post.title"
></blog-post>
四、子组件改变prop值
有两种常见情况，子组件试图改变一个prop的情形。
1、这个prop用来传递一个初始值，这个子组件接下来希望将其作为一个本地的prop数据来使用。这种情况，最好定义一个本地的data属性并将其这个prop用作其初始值。
props: ['initialCounter'],
data: () {
return {
counter: this.initialCounter
}
}
2、这个prop以一种原始的值传入且需要进行转换。这种情况下，最好使用这个prop的值来定义一个计算属性。
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。
五、Prop验证
export default{
data(){
},
props:{
propA:{
type : String,
required : true, //表示必填
default : "abc" , //默认值
或 default : function(){
return { message : "hello" } //对象或数组且一定会从一个工厂函数返回默认值
},
propF{
validator:function(value){
//这个值必须匹配下列字符串中的一个
return ['success','warning','danger'].indexof(value) !== -1
}
}
}
}
}
注意那些 prop 会在一个组件实例创建之前进行验证，所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的。???
type 可以是原生构造函数中的一个：String、Number、Boolean 、Array、Object、Date、Function、Symbol。也可以是一个自定义的构造函数。
