Vue 组件&组件之间的通信 之 父组件向子组件传值

父组件向子组件传值：父组件通过属性向下传值的方式和子组件通信；

使用步骤：

定义组件：现有自定义组件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时：

会进行自动校验，见控制台：