vue中props赋值给data出现的问题及解决

components:{Tinymce},
  props:['id','formDatas'],
  data() {
    return {
      form: {
        title: '',
        title_type: '',
        push_date: '',
        source: '',
        title_introduce: '',
        title_content:'',
      }
    }
  },
  created(){
    this.form = this.formDatas
  },

 watch:{
    formDatas(news,olds){
      this.form = news
    }
  }

<template>
  
</template>
 
<script>
export default {
    name:'child '
    props:{
        a:{
            type:Object
        }
    },
    data(){
        return{
            b:this.a
        }
    },
    mounted(){
        console.log("b",this.b) //打印出来是a:{a1:1}
        //a值改变后打印b值
         console.log("b",this.b) //打印出来还是a:{a1:1}
    }
}
</script>
 
<style>
 
</style>
<!-------------------------------------------------------->
<template>
   <!---引用子组件--->
  <child :a="a"></child>
</template>
 
<script>
export default {
    data(){
        return{
            a:{
                a1:1
            }
        }
    },
    mounted(){
        //改变a值
        this.a.a1 = 2
    }
    
}
</script>
 
<style>
 
</style>

<template>
  
</template>
 
<script>
export default {
    name:'child '
    props:{
        a:{
            type:Object
        }
    },
    data(){
        return{
            b:this.a
        }
    },
    watch:{
        a(val){
            //当a值变化时
            this.b = this.a
        }
    },
    mounted(){
        //a值改变后打印b值
         console.log("b",this.b) //打印出来就是最新值了   a:{a1:2}
    }
}
</script>
 
<style>
 
</style>