父组件向子组件传对象

1.通过对象的嵌套

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

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

        子组件中

 
<script>
  export default {
      name: "infoDialog",
      props:{
         data:{
           type:Object,
           defalut:{}  
    }
      },
      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,
           defalut:{}  
    }
      },
      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>

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

猜你喜欢

转载自blog.csdn.net/qq_41550865/article/details/85759468
今日推荐