父组件向子组件传值：父组件通过属性向下传值的方式和子组件通信；
使用步骤：
定义组件：现有自定义组件com-a、com-b，com-a是com-b的父组件；
准备获取数据：com-b要获取父组件data中的name属性；
在<com-b :name=“name”></com-b> 使用v-bind 绑定name属性，红色部分为属性名称，可以随意写。
在子组件定义部分里添加选项，值是个字符串数组 props:[‘name’]，将上边红色的属性名称写在这里；
之后就可定义在子组件中使用name属性了；
现在就来解决上一篇博文提出的问题吧，让父组件与子组件进行通信：
vue代码：
<template id="father-template">
<div>
<h2> 父组件</h2>
username:<span>{{name}}</span>
<hr />
<child-component :name="name"></child-component>
</div>
</template>
<template id="child-template">
<div>
<p> 子组件</p>
fatherData:<span >{{name}}</span> </div>
</template>
<script> new Vue({
components:{
"father-component":{
data(){
return{
name:'perfect'
}
},
template:'#father-template', components:{
"child-component":{ template:'#child-template',
props:['name']
}
}, }
} }).$mount('div');
</script>
由图可知子组件已经可以和父组件进行通信了，因为共用了属性name
现在我们就来测试一下调用父组件的多个属性，以及对属性值的绑定，可以进行观测数据的变化
该效果图的vue代码：
<template id="father-template">
<div>
<h2> 父组件</h2>
myData:<span>{{name}},{{id}},{{user.username}}</span><br />
fatherData:<span>{{msg}}</span><br />
<input type="text" v-model="name"/>
<hr />
<child-component :name="name" :id='id' :user='user'></child-component>
</div>
</template>
<template id="child-template">
<div>
<p> 子组件</p>
fatherData:<span >{{name}},{{id}},{{user.username}}</span> </div>
</template>
<script> new Vue({ data:{
msg:"欢迎来到perfect*的博客园!!!"
},
components:{
"father-component":{
data(){
return{
id:,
name:'perfect',
user:{ username:'博客园---perfect*',
password:'' }
}
},
props:['msg'],
template:'#father-template', components:{
"child-component":{ template:'#child-template',
props:['name','id','user']
}
}, }
} }).$mount('div');
</script>
html:
<div>
<father-component :msg="msg"></father-component>
</div>
father-component的父组件是body,由于属性msg是全局的，所以需要使用的时候，需要进行绑定
props选项高级配置
详细介绍prop网址：https://cn.vuejs.org/v2/guide/components-props.html
在上面的props的使用是字符串数组
props:['name','id','user']
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。
对象的形式：
props:{
name:String,
id:Number,
user:Object
}
components:{
"father-component":{
data(){
return{
id:"",
name:'perfect',
user:{
username:'博客园---perfect*',
password:''
}
}
},
结果虽然显示出来了，但是控制台报错误了，错误显示，id的类型检测错误，它是number类型，不是一个字符串类型
解决方法：
props:{
name:String,
id:[Number,String],
user:Object
}
在props中每一个属性都可以定义成对象的类型：
props:{
name:{
type:String,
required:true//必须进行传值
},
id:[Number,String],
user:Object
}
}
当把组件中的name删除时，会出现下面这样的错误：
<child-component :id='id' :user='user'></child-component>
解决方法：我们可以通过在name对象中定义一个属性default
props:{
name:{
type:String,
//required:true,//必须进行传值
default:'perfect*'//定义一个默认值
},
id:[Number,String],
user:Object
}
}
},
这样控制台就没有错误了
接下来为user对象设置一个默认值
<child-component :id='id' ></child-component>
props:{
name:{
type:String,
//required:true,//必须进行传值
default:'perfect*'//定义一个默认值
},
id:[Number,String],
user:{
type:Object,
default:function(){
return {username:'perfect***',password:''}
}
}
}
}
},
数据校验
当定义一个属性age:18时，初始效果
校验demo:
props:{
name:{
type:String,
//required:true,//必须进行传值
default:'perfect*'//定义一个默认值
},
id:[Number,String],
user:{
type:Object,
default:function(){
return {username:'perfect***',password:''}
}
},
age:{
type:Number,
validator: function (value) {
return value>=;
}
}
}
}
},
<child-component :id='id' :age='age'></child-component>
当age=-18时：
会进行自动校验，见控制台：
