vueにおける親子コンポーネントの相互伝達

子の父
論理:サブコンポーネントのボタンをクリックし、そのクリックイベントをトリガー$emitで親カスタムイベントをトリガーし、親に値を渡す

      //             ，               func   ，       ？？？
      //  emit     ：    ，  、     
      // this.$emit('func123', 123, 456)
      //                 

  <div id="id">
 2 
 3 <h3>          -- {{age}}h3>
 4 
 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>

父の伝子
論理:親から子への値の転送はprops:[]のみで親要素を子に渡します.
//注意:コンポーネント内のすべてのpropsのデータは、親コンポーネントを介して子コンポーネントに渡される//propsのデータであり、読み取り専用であり、再割り当てはできません//現在のコンポーネントラベルに対応する属性の属性値を取得できます

<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:'
 ，     {{money}}
',
          
              props:['money']  //           money  ，   props    ，    ，  ，        

          }
      }
  }) 

  script>