父组件向子组件传值：父组件通过属性向下传值的方式和子组件通信；
使用步骤：
定义组件：现有自定义组件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:1, name:'perfect', user:{ username:'博客园---perfect*', password:'123123' } } }, 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:"01", name:'perfect', user:{ username:'博客园---perfect*', password:'123123' } } },
结果虽然显示出来了，但是控制台报错误了，错误显示，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:'123123'} } } } } },
数据校验
当定义一个属性age:18时，初始效果
校验demo:
props:{ name:{ type:String, //required:true,//必须进行传值 default:'perfect*'//定义一个默认值 }, id:[Number,String], user:{ type:Object, default:function(){ return {username:'perfect***',password:'123123'} } }, age:{ type:Number, validator: function (value) { return value>=0; } } } } },
<child-component :id='id' :age='age'></child-component>
当age=-18时：
会进行自动校验，见控制台：
