vue 父子组件相互传值

              子传父

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

         

<div id="id">

<h3>儿子 你今年多大了 -- {{age}}</h3>
<!-- @getage 自定义事件 -->
<con1 @getage='getage'></con1>
</div>
<!-- 写一个子组件模板 -->
<template id="son1">
<!-- 必须用一个大盒子包裹 -->
<div>
<h3>我今年<input type="button" value="已经" @click='click'></h3>
</div>
 
</template>

<script>
 //创建一个Vue实例
var ss = new Vue({
   el:'#id',
   data:{
   // 定义变量 age
    age:' '
   },
   methods:{
  //getage(age) age为子级传来的值     获取到之后   更改父级age的值

      getage(age){
      this.age = age
   }
},
 
   components:{
     //定义一个私有的子级模板
       con1:{
          template:"#son1",
          data(){
          return {
          age:22
           }
        },
          methods:{
     //  click 单击事件 $emit 触发父级事件  并传值
           click(){
              this.$emit('getage',this.age)
           }
       }
    }
  }

})

</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 父组件向子组件传值
               
                props:['money']

            }
        }
    }) 

    </script>