为何需要prop
在一个父组件包含一个子组件时，父组件和子组件一般来说都需要沟通交流。且通常情况下，是父组件传递数据给特定的子组件，由特定的子组件负责特定的逻辑处理得出特定的值。父组件给子组件传递数据这一过程就是通过为子组件设置prop实现的。使用prop的另一个原因是每个组件的作用域都是相互独立的，即使是父级组件和子级组件的关系。所以就由prop承担起父级组件向子级组件传递数据这一重任。
prop需要提前声明
比如我们定义的组件需要通过a属性获得父组件传递的数据就必须像这样先声明
Vue.component("cpt",{
template:"<div>{{messageByA}}</div>"
,prop:["a"]
});
<parentComponent>
<cpt a="a"></cpt>
</parentComponent>
输出为：
<parentComponent>
<div>a</div>
</parentComponent>需要注意的是当我们在props数组中使用骆驼标记法，我们在书写html时必须使用短横线分隔标记法，就像这样
props:["someProp"] //someProp骆驼标记法<cpt some-prop="someValue"></cpt> //some-prop短横线分隔标记法给prop绑定静态值与动态值
绑定静态值
<cpt some-prop="db"></cpt> //绑定静态值字符串"db"绑定动态值
//#el为一个vue实例且data中设置了db属性
<div id="el">
<cpt :some-prop="db"></db>
</div>绑定静态值时常常会认为这样是传递了数字
<cpt some-prop="5"></cpt>其实是传递了字符串“5”，下面这种方式也是传递了字符串“5”
<cpt some-prop=5></cpt>如果我们想传递一个数字5该怎么办呢？
<cpt :some-prop="5"></cpt> //传递了数字5为什么会这样呢？因为:some-prop是vue的指令，会将字符串里的作为表达式计算得到返回值，因此就为数字5
还有一种情况值得注意：
<div id="d"><db s=5></db></div>
<script>
let d=new Vue({
el:"#d"
,components:{
db:{
props:["s"]
,template:`<div>${s}</div>`
//此处为模板字符串相当于"<div>"+s+"</div>"
}
}
});
</script>结果为页面上显示undefined。这是因为js运行到template那一行时，vue尚未实例化结束，其局部化定义的组件db也没有实例化完成，也就不要说去接收给db组件传递的s属性的值这一操作了,此时，s为undefined。
正确操作：
<div id="d"><db s=5></db></div>
<script>
let d=new Vue({
el:"#d"
,components:{
db:{
props:["s"]
,template:`<div>{{s}}</div>`
}
}
});
</script>这是操作步骤变为
1.vue实例和db组件实例化结束。
2.db组件接收储存字符串“5”作为s的值
3.<div id="d"><db s=1></db></div>变为<div id="d"><div>{{s}}</div></div>
4.计算s在db组件中查找s的值
5.最终结果为<div id="d"><div>5</div></div>
对prop值进一步操作
我们有些现对prop值进行进一步操作加工，可以通过computed来实现
props:["someProp"]
,computed:{
key:function(){
return someProp+1;//对someProp进行加一操作返回
}
}注意获取到的prop值如果为object（array也是object的一种），将保有对此对象的引用，对此对象进行更改会造成其他持有此对象的受到影响。
对传入的prop值进行验证
话不多说直接上代码
Vue.component("cpt",{
template:...
,props:{
p:{
type:Object//此处为一构造函数，操作为p instanceOf 构造函数
,required:true/false//是否必须输入true为必须
,defalut:value/function//设置默认值可以为直接值也可以为返回值的函数
}
}
});也可以这样写的简单点
props:{
p:Object//直接些构造函数名，不要必须输入，输入的话会用instanceOf判断
,p1:[Object,Number]//多个构造函数，可以输入多个类型的值
}也可以自定义检测函数
props:{
p:{
validate:fucntion(v){
return v%2==0;//输入的值必须为偶数
}
}
}