vue 父子组件传值

先说问题，在vue组件haul开发中，遇到了父组件往子组件传值的问题,父组件点击，子页面dialog不展示，注：这个问题浪费了我很长还见，网上找了一堆答非所问的答案都不行，记录一下

父

<template>
    <v-myDialog :dialog_format= "exampleDialogFormat" :data_format=     "exampleDataFormat"/>

</template>

<script>

import myDialog from "./myDialog"
export default { 
    name: "faultRecord",
    methods: {
   　　 click_showExample(eType) {
　　      this.exampleDialogFormat.sync = true
      　　this.exampleDialogFormat.title = '查看示例'
　　      this.exampleDataFormat.exampleType = eType
    　　}    
    }
}
</script>    

子

<template>
    <div class="filter-container">
    <el-dialog
        :title="title"
        :visible.sync="sync"
        width="85%"
        height="100%"
        >
        <div >
        </div>
    </el-dialog>
    </div>
</template>

<script>


export default ({
    name: "myDialog",
    props: {
      dialog_format: Object,
      data_formate: Object,
    },  
    watch: {
        'dialog_format': function(val) {
            console.log(val)
          this.sync = val.sync;
          this.title = val.title;
         },
        'data_formate': function(val) {
            console.log(val)
            this.exampleType = val.exampleType
        },
    },
    data() {
        return {  
            sync: false,
            title: null,
            exampleType: 1,
        }
    },
    methods: {
       
    }
})
</script>

原因

　　经过观察，父组件数据已经传递过去了，子组件无法通过watch监听到数据变化；因为数据未格式化

解决方案

　　父组件传递数据做格式化

<template>
    <v-myDialog :dialog_format= "exampleDialogFormat" :data_format=     "exampleDataFormat"/>

</template>

<script>

import myDialog from "./myDialog"
export default { 
    name: "faultRecord",
    methods: {
   　　 click_showExample(eType) {
　　      this.exampleDialogFormat.sync = true
      　　this.exampleDialogFormat.title = '查看示例'

　　　　　 this.exampleDialogFormat = JSON.parse(JSON.stringify(this.exampleDialogFormat))

　　　　   this.exampleDataFormat.exampleType = eType

　　　　　 this.exampleDataFormat = JSON.parse(JSON.stringify(this.exampleDataFormat))

    　　}    
    }
}
</script>