在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
})
})
},
