子组件无法监听父组件的变化
今天做项目的时候遇到了一个问题:
在父组件中将分页好的数据列表传给子组件展示,在子组件中要对传来的数据做处理再展示,将父组件传来的值赋给子组件data中定义的变量,watch监听不到变化。
解决:
父组件
<table
:prdTable = "tableData" //传入的table是分页后的数据传给子组件 会改变
</table>
<ui-pagination
@size-change = "handleSizeChange"
@current-change = "handleCurrentChange" //点击页
:current-page.sync = "currentPage"
:page-size = “pageSize”
layout。。。。。。。。。。 //这里就不一一打了
>
</ui-pagination>
子组件
<div class="a" >
<ui-table :data = "listShow" cell-class-name = "table-cell" max-width = “50”>
<ui-table-column label = "XXX" min-width = "200px"
</ui-table-column>
</ui-table>
data(){
return {
listShow : this.prdTable //将父组件传的值赋给listShow
}
},
props :{
prdTable:{
type:Array,
default(){
return[
{
a:" ",
b:" ",
......
}
]
}
}
}
created(){},
watch:{
prdTable(){
this.listShow = this.prdTable //监听父组件的传的值发生改变
}
}