vue父子之间通信

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

实际效果图如下：

html:

<!--父组件-->
<div id="app">
    <table border="1" cellpadding="0" cellspacing="0">
        <tr>
            <th colspan="3">父组件数据</th>
        </tr>
        <tr>
            <td>name</td>
            <td>{{name}}</td>
            <td><input type="text" v-model="name"></td>
        </tr>
        <tr>
            <td>age</td>
            <td>{{age}}</td>
            <td><input type="text" v-model="age"></td>
        </tr>
    </table>
    <v-son :son-name="name" :son-age="age" @sonc="sonf" @sont="sons"></v-son>

</div>

<!--子组件-->
<template id="son">
    <div>
        <button @click="mson">子组件按钮</button>
    <table border="1" cellpadding="0" cellspacing="0">
        <tr>
            <th colspan="3">子组件数据{{sonMsg}}</th>
        </tr>
        <tr>
            <td>name</td>
            <td>{{sonName}}</td>
            <td><input type="text" v-model="sonName"></td>
        </tr>
        <tr>
            <td>age</td>
            <td>{{sonAge}}</td>
            <td><input type="text" v-model="sonAge"></td>
        </tr>
    </table>
    </div>
</template>

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);
               }
             }
         }
        }
    })