vue 中父子组件相互传值

子传父

逻辑： 单击子组件的按钮 ，触发它的单击事件 通过 $emit 触发父级自定义事件 并传一个值给父级

      // 当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？
      //  emit 英文原意： 是触发，调用、发射的意思
      // this.$emit('func123', 123, 456)
      // 能够触发当前组件标签上定义的事件

  <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>

父传子

逻辑：父级向子级传值 只用 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:'<h3>爸，我知道你有{{money}}</h3>',
          
              props:['money']  // 把父组件传递过来的 money属性，先在 props 数组中，定义一下，这样，才能使用这个数据

          }
      }
  }) 

  </script>