vue父组件请求的数据传递给子组件，子组件报错。

    在做后台管理的时候，我们选择的UI框架是Element-ui。有好几个页面都有表格和分页器。我选择把分页器进行了封装处理。但是我将请求过来的数据，里面涉及到总条数，我想将总条数传给子组件，子组件分页器，点击发生变化时再将页数传给父组件，使父组件中的数据得到对应页数的渲染。

但是很不好的是传过来渲染的时候，子组件出了报错

父组件

<template>
    <div class="box">
      <top  :title="title" />
      <pagination :parentData="dataList"/>
    </div>
</template>

//methods    定义在methods 当子组件的页数发生变化的时候再次调用
      this.$ajax('/api/product/list.do',{
        params:{
          pageNum:this.pageNum,
          pageSize:this.pageSize
        }
      }).then(res => {
        let {data} = res.data
        this.dataList = data
      }).catch(err => {
        console.log(err)
      })

子组件(弹出了一个错误）

vue.esm.js?c5de:628 [Vue warn]: Error in render: "TypeError: Cannot read property 'list' of null" found in <Pagination> at src/components/common/pagination.vue <Commodity> at src/views/Commodity/commodity.vue <ElMain> at packages/main/src/main.vue <ElContainer> at packages/container/src/main.vue <App> at src/views/index.vue <App> at src/App.vue <Root>

处理方法（当然，解决的方法肯定有很多种）

//以为涉及到异步，我们当值存在的时候再将组建渲染
<template>
    <div class="box">
      <top  :title="title" />
      <pagination v-if="dataList !==null" :parentData="dataList" @pageChange="pageChange"/>
    </div>
</template>