问题概述
工作中遇到一个问题,子组件需要根据父组件传递的props做出相应的逻辑处理,但是watch监听始终拦截父组件对于props的改变。子组件代码如下:
watch( props.tagsTableData,(val)=>{
isFirst = true
currentPage.value = 1
tableData.value = []
tableDataTotal.value = []
nextTick(() => {
handleCurrentChange(1)
console.log(currentPage.value, 'currentPage--val')
getTableData()
})
},{deep:true,})
不论是增加deep还是增加immetate都不起作用。翻阅了大量文章,最后终于找到了原因。原来是watch监听对象属性变化时,不能这么写,要把watch的第一个参数写成函数形式,否则监听不到。
//修改后的代码
watch( () => props.tagsTableData,(val)=>{
isFirst = true
currentPage.value = 1
tableData.value = []
tableDataTotal.value = []
nextTick(() => {
handleCurrentChange(1)
console.log(currentPage.value, 'currentPage--val')
getTableData()
})
},{deep:true,})
先记录一下,后续探讨问题的深层原因。