给子组件传递复杂数据

在 js 文件中定义类

//Es6 写法

export class Person {

  constructor (data1,data2){

    this.name = data1.name;

    this.age = data2.age;
    
    this.img = data2.images ? data2.images[0]: ""; 
    //某些给的图片列表为空

  }

}


//Es5 写法

export function Person(data1, data2) {

  this.name = data1.name;

  this.age = data2.age;

}

在父组件接受到数据之后

import {Person} from "network/detail.js"


data() {
  person:{}
},
created() {
    this.getdata();
},
methods: {
    getdata(){
      api
        .ajaxPost("user/getOneUserInfo", {
          _id: id,
        })
        .then(({ data }) => {
             
             this.person = new Persion2(data.itemInfo,data);
        });
        
    }
}

子组件接值

<div v-if="Object.keys(persopn).length != 0">

//父组件给传了值的时候再渲染子组件
//如何判断一个对象里没有属性？

//const obj = {}

//Obj,key(obj).length == 0;

</div>

Props:{
    persopn:{
        type: object
    }
}