在vue项目实际开发中我们经常会使用props和emit来进行子父组件的传值通信，父组件向子组件传递数据是通过prop传递的，

子组件传递数据给父组件是通过$emit触发事件来做到的。例如：

Vue.component('child',{        data(){            return {                mymessage:this.message            }        },        template:`            
     
                
       
     
        `,        props:['message'],//得到父组件传递过来的数据        methods:{            passData(val){                //触发父组件中的事件                this.$emit('getChildData',val)            }        }    })    Vue.component('parent',{        template:`            
     
                
      
this is parent compoent!
                
                  
     
        `,        data(){            return {                message:'hello'            }        },        methods:{            //执行子组件触发的事件            getChildData(val){                console.log(val)            }        }    })    var app=new Vue({        el:'#app',        template:`            
     
                
                  
     
        `    })

既然是新姿势当然要介绍一下骚操作

1.$attrs和$listeners

  适用场景：父组件A下面有子组件B，组件B下面有组件C,这时候如果A组件想传值给C组件就可以用$attrs和$listeners

Vue.component('C',{        template:`            
     
                
       
     
        `,        methods:{            passCData(val){                //触发父组件A中的事件                this.$emit('getCData',val)            }        }    })    Vue.component('B',{        data(){            return {                mymessage:this.message            }        },        template:`            
     
                
                       
                      
                      
                  
     
        `,        props:['message'],//得到父组件传递过来的数据        methods:{            passData(val){                //触发父组件中的事件                this.$emit('getChildData',val)            }        }    })    Vue.component('A',{        template:`            
     
                
      
this is parent compoent!
                
                  
     
        `,        data(){            return {                message:'hello',                messagec:'hello c' //传递给c组件的数据            }        },        methods:{            getChildData(val){                console.log('这是来自B组件的数据')            },            //执行C子组件触发的事件            getCData(val){                console.log("这是来自C组件的数据："+val)            }        }    })    var app=new Vue({        el:'#app',        template:`            
     
                
                  
     
        `    })

2.provide和inject

适用场景：父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，只要在父组件的生命周期内，子组件都可以调用。

Vue.component('child',{        inject:['for'],//得到父组件传递过来的数据        data(){            return {                mymessage:this.for            }        },        template:`            
     
                
                   
     
    })    Vue.component('parent',{        template:`            
     
                
      
this is parent compoent!
                
                  
     
        `,        provide:{            for:'test'        },        data(){            return {                message:'hello'            }        }    })    var app=new Vue({        el:'#app',        template:`            
     
                
                  
     
        `    })

3.$parent和$child

使用场景：在父组件中可直接通过this.$children操作子组件，子组件中可通过this.$parent修改父组件的值

Vue.component('child',{        props:{            value:String, //v-model会自动传递一个字段为value的prop属性        },        data(){            return {                mymessage:this.value            }        },        methods:{            changeValue(){                this.$parent.message = this.mymessage;//通过如此调用可以改变父组件的值            }        },        template:`            
     
                
                   
     
    })    Vue.component('parent',{        template:`            
     
                
      
this is parent compoent!
                
      test                
                  
     
        `,        methods:{            changeChildValue(){                this.$children[0].mymessage = 'hello';            }        },        data(){            return {                message:'hello'            }        }    })    var app=new Vue({        el:'#app',        template:`            
     
                
                  
     
        `    })