父元素改變時，實時改變子元素，子元素通過按鈕改變父元素

實際效果圖如下：

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