????在做后臺(tái)管理的時(shí)候悲没，我們選擇的UI框架是Element-ui篮迎。有好幾個(gè)頁面都有表格和分頁器。我選擇把分頁器進(jìn)行了封裝處理示姿。但是我將請(qǐng)求過來的數(shù)據(jù)甜橱，里面涉及到總條數(shù)，我想將總條數(shù)傳給子組件栈戳，子組件分頁器岂傲，點(diǎn)擊發(fā)生變化時(shí)再將頁數(shù)傳給父組件，使父組件中的數(shù)據(jù)得到對(duì)應(yīng)頁數(shù)的渲染子檀。
但是很不好的是傳過來渲染的時(shí)候镊掖，子組件出了報(bào)錯(cuò)
父組件
<template>
<div class="box">
<top :title="title" />
<pagination :parentData="dataList"/>
</div>
</template>
//methods 定義在methods 當(dāng)子組件的頁數(shù)發(fā)生變化的時(shí)候再次調(diào)用
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)
})
子組件(彈出了一個(gè)錯(cuò)誤）
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>
處理方法（當(dāng)然，解決的方法肯定有很多種）
//以為涉及到異步褂痰，我們當(dāng)值存在的時(shí)候再將組建渲染
<template>
<div class="box">
<top :title="title" />
<pagination v-if="dataList !==null" :parentData="dataList" @pageChange="pageChange"/>
</div>
</template>
