父组件向子组件传对象

1.通过对象的嵌套

         在父组件中引入子组件，数据绑定为temp

<script>
    export default{
        data(){
        temp:{
            manager:{
              name:"",
              age:""   
         }
      }
              } 
                  }
</script>

        子组件中

 
<script>
export default {
  name: "infoDialog",
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    }
  },
  data() {
    return {
      info: this.data
    };
  },
};
</script>

    子组件对于传输数据的使用

<template>
   <div class="container">
          <span>{{info.manager.name}}</span>  
          <span>{{info.manager.age}}</span>
   </div>
</template>

2.利用监听来进行数值的传值

          父组件：

<script>
    export default{
        data(){
        temp:{
              name:"",
              age:""   
      }
              } 
                  }
</script>

              子组件：由于传值时的问题，传过来的data初始时为父组件中data的默认值，监听数值的变化，传最新的值给子组件

<script>
  export default {
      name: "infoDialog",
      props:{
         data:{
           type:Object,
           default: () => {
                return {};
                  },
               }
            },
      data(){
        return{
           info:this.data  
        }
      },   
 watch: {
      data: function (newVal, oldVal) {
        this.formData = newVal;
      }
    }
    }
 
</script>

         子组件对传输数据的使用：

<template>
   <div class="container">
          <span>{{info.name}}</span>  
          <span>{{info.age}}</span>
   </div>
</template>

3.直接对props的值进行绑定使用

<template>
   <div class="container">
          <span>{{data.name}}</span>  
          <span>{{data.age}}</span>
   </div>
</template>

         注意：推荐使用第二种和第三种方法