Bug解决记录 ---在vue组件通信中,父组件通过prop向子组件穿一个对象,父子组件数据不能同步

在vue组件通信中,父组件通过prop向子组件穿一个对象,父组件更新对象数据触发子组件方法去请求数据(注:父组件更新的对象数据就是子组件请求需携带的参数),但子组件的第一次请求携带的参数为旧值,第二次请求才拿到新值。

解决办法: 1、监听器试过,不起效果。

2、 使用$nextTick, 意为在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM. 也就是说,当dom元素发生改变,重新渲染dom树后,再执行vue.$nextTick()里面的内容。

// 父组件
  <PoliceSelect :searchData="searchData" 
    :origin-value="form.mjbh" 
    :origin-label="form.xm" 
    requestURL="/largeActivityTcService/laMjxx/list" 
    :isMultiSelect="false" 
    :tableHead="tableHead" 
    ref="police">
 </PoliceSelect> 
  // 方法methods
searchClick(searchConditions) {
      const searchData = {}
      searchConditions.data.forEach(item => {
        if(item.show) {
          searchData[item.name] = item.value
        }
      })
      searchData.sjgsbm = this.policeUnit.value
      searchData.hdbh = this.hdbh
      this.searchData = searchData
      this.$refs.police.getPoliceList() // 触发子组件事件
},

// 子组件 的 那个方法
getPoliceList() {
  if(this.originValue) {
    this.policeList.push(this.originValue)
  }
  this.isLoading = true
  this.$nextTick(function() {
    const payload = this.searchData
    payload.current = this.paginationQuery.current
    payload.size = this.paginationQuery.size
    fetchTable(this.requestURL, 'get', payload).then(res => {
      this.isLoading = false
      const { data } = res.data
      this.total = data.total
      data.records.map(i => i.isSelect = false)
      data.records.forEach(item => {
        if(this.policeList.includes(item.mjbh)) {
          item.isSelect = true
        }
      })
      this.currentTableData = data.records
    })
  })
},

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值