vue父子之间通信

父元素改变时，实时改变子元素，子元素通过按钮改变父元素

实际效果图如下：

html:

    

        

            
父组件数据
        
        

            
name
            
{{name}}
            

        
        

            
age
            
{{age}}
            

        
    
    

js.

    //建立一个vue实例
    new Vue({
        el:"#app",
        data:{
            name:"father",
            age:"28"
        },
        methods:{
            sonf(val){
                this.name=val;
            },
            sons(val){
                this.age=val;
            }
        },
        components:{
         "vSon":{
             template:'#son',
             props:["sonName","sonAge"],
             data(){
                 return{
                     sonMsg:'这是儿子的数据',
                 }
             },
             methods:{
               mson(){
                   this.$emit("sonc",this.sonName);
                   this.$emit("sont",this.sonAge);
               }
             }
         }
        }
    })