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>