父组件向子组件传参,页面渲染了数据但是在生命周期里有时候拿不到数据

62 阅读1分钟
//在使用父组件向子组件传参时,
 <taskDetails :data="dataObj" />
 
 //子组件使用接收
 props: {
    data: {
      //详情的数据
      type: Object,
      default: () => {},
    },
  },
  
  //子组件在页面可以直接渲染
   <span>{{ data.taskId }}</span>
   
  //但是在生命周期里不能直接拿到数据,因为父组件传过来的数据是异步的,传过来以后的结果和浏览器渲染层级有关,所以应该在 watch 里监听数据的变化
  watch: {
    data() {
    //判断传过来是否真的有数据
      if (this.data) {
         console.log(this.data, "数据12222");
      }
    },
  },