コンポーネント間のデータの転送

一、親子コンポーネント

1.               ，      
2.             （               ）
3.     ，             ，              

二、コンポーネント間のデータの転送--サブコンポーネントが親コンポーネントのデータにアクセスする(通信)

             ，             (on-bind=   ，    )
              ，  props         ，           
        ：             ：data，props，computed       

    
    
    


    window.onload=function () {
        let vm = new Vue({//   
            el:"#myApp",
            data:{
                msg:"welcome to my vue"
            },
            components:{
                "my-hello":{//   
                    template:"#hello",
                    data:function(){
                        return {
                            msg:'   ',
                            name:'  ',
                            age:20,
                            user:{id:708,username:'  '}
                        }
                    },
                    components:{//   
                        "my-world":{
                            template:"#world",
                            // props:['msg','name'],//        
                            props:{//      ，        ，    ，   ，  
                                msg:String,//    
                                name:{
                                    type:String,
                                    required:true//    name    ，     
                                },
                                age:{
                                    type:Number,
                                    default:18,//          ，    18
                                    validator:function(value){//           
                                        return value>0
                                    }
                                },
                                user:{
                                    type:Object,
                                    default:function(){//            ，             
                                        return {id:2201,username:'  '}
                                    }
                                }
                            }
                        } 
                    }
                },
                
            }
            
        })
    }




    

        
    
    
     


    ：
1、  on-bind=""               ，      props       
2、props            ，         ，      ，   ，  
    ：
 
 props:['msg','name'],//        

三、コンポーネント間のデータの転送--親コンポーネントが子コンポーネントのデータにアクセスする(通信)

    
    
    


    window.onload=function () {
        let vm = new Vue({//   
            el:"#myApp",
            data:{
                msg:"welcome to my vue"
            },
            components:{
                "my-hello":{//   
                    template:"#hello",
                    data:function(){
                        return {
                            msg:'   ',
                            name:'  ',
                            age:20,
                            user:{id:708,username:'  '},
                            sex:'',//      
                            height :'',
                        }
                    },
                    methods:{
                        //           
                        getSonDadat:function(sex,height){
                            this.sex=sex;
                            this.height = height;
                        }
                    },
                    components:{//   
                        "my-world":{
                            data:function(){
                                return {
                                    sex:' ',
                                    height :160,
                                }
                            },
                            methods:{
                                //            ，$emit(    ,  )
                                send:function(){
                                    this.$emit('e-world',this.sex,this.height);
                                }
                            },
                            mounted:function(){
                                this.send();
                            },
                            template:"#world",
                            // props:['msg','name'],//        
                            props:{//      ，        ，    ，   ，  
                                msg:String,//    
                                name:{
                                    type:String,
                                    required:true//    name    ，     
                                },
                                age:{
                                    type:Number,
                                    default:18,//          ，    18
                                    validator:function(value){//           
                                        return value>0
                                    }
                                },
                                user:{
                                    type:Object,
                                    default:function(){//            ，             
                                        return {id:2201,username:'  '}
                                    }
                                }
                            }
                        } 
                    }
                },
                
            }
            
        })
    }




    

        
    
    
     



  ：
1.         ，  this.$emit(   ,  1，  2....)  
  send:function(){
       this.$emit('e-world',this.sex,this.height);
  }
2.                   
 getSonDadat:function(sex,height){
         this.sex=sex;
          this.height = height;
     }
3.            emit  
 

  ：
1.       vm.$emit(   ，  )         ，      
2.