vue3 watch 无法监测父组件props的问题

问题概述

工作中遇到一个问题,子组件需要根据父组件传递的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,})

先记录一下,后续探讨问题的深层原因。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值