Vue2.x之父子组件数据传递

父传子，并且通过fatherEvent接收子组件传过来的值

<template>
    <div class='father'>
        <Son :fatherData="fatherData" @fatherEvent='getSonMsg' />
     </div>
</template>


import Son from './Son';
export default{
data(){
return{
  fatherData:{
    msgData:"我是父亲"
}  
},
components:{
Son
},
methods:{
getSonMsg(msg){
    console.log(`这是从子组件传来的msg${msg}`)
}
}

子组件接受父组件消息，并通过$emit回传父组件(当然也可以不通过watch）

<template>
    <div class='son' >{msg}
        <button @click='fatherEmit'></button>
    </div>
</template>
 <script>

export default(){
name:"son',
props:{
    fatherData:Object
}
data(){
return{
msg:""
}
}
},
watch:{
fatherData:function(newValue,oldValue){
  this.changeData()
}
},
methods:{
changeData(){
this.$nextTick(function(){
this.msg = this.fatherData.msgData
}
}),
fatherEmit(){
this.$emit('fatherEvent','我是额子')
}
}

</script>    

这样就完成父子和子父之间数据的传递了