vue 父子組件相互傳值

              子傳父

               邏輯： 單擊子組件的按鈕 ，觸發它的單擊事件   通過 $emit 觸發父級自定義事件 並傳一個值給父級 

 1 <div id="id">
 2 
 3 <h3>兒子 你今年多大了 -- {{age}}</h3>
 4 <!-- @getage 自定義事件 -->
 5 <con1 @getage='getage'></con1>
 6 </div>
 7 <!-- 寫一個子組件模板 -->
 8 <template id="son1">
 9 <!-- 必須用一個大盒子包裹 -->
10 <div>
11 <h3>我今年<input type="button" value="已經" @click='click'></h3>
12 </div>
13  
14 </template>
15 
16 <script>
17  //創建一個Vue實例
18 var ss = new Vue({
19    el:'#id',
20    data:{
21    // 定義變數 age
22     age:' '
23    },
24    methods:{
25   //getage(age) age為子級傳來的值     獲取到之後   更改父級age的值
26 
27       getage(age){
28       this.age = age
29    }
30 },
31  
32    components:{
33      //定義一個私有的子級模板
34        con1:{
35           template:"#son1",
36           data(){
37           return {
38           age:22
39            }
40         },
41           methods:{
42      //  click 單擊事件 $emit 觸發父級事件  並傳值
43            click(){
44               this.$emit('getage',this.age)
45            }
46        }
47     }
48   }
49 
50 })
51 
52 </script>

 <div id="id">
        
        <h2>你爸我有{{money}}</h2>
        <con1 :money='money'></con1>
    </div>
    <script>
    
    var ss = new Vue({
        el:'#id',
        data:{
            money:1000000
        },
        methods:{

        },
        //定義一個私有子組件 
        components:{
            
            con1:{
                template:'<h3>爸，我知道你有{{money}}</h3>',
                //props 父組件向子組件傳值
               
                props:['money']

            }
        }
    }) 

    </script>