描述:需求是根据父组件传过来的参数进行提取然后发起请求,直接看代码比较值观
首先是父组件:
绑定了点击事件
<home-pie-chart :data="dataList" title="整改情况" center-name="问题总数" legend-unit="个" @click.native="showDialog(date)" />
<script>
import Detail from './Detail'
export default {
components: { Detail },
data() {
return {
date: -6
};
},
methods: {
showDialog(item) {
this.param = item;
}
}
};
</script>
然后是子组件:
<template>
<div class="detail" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.6)">
<div class="tr">
<div class="th">巡检类型</div>
<div class="th">检查项</div>
<div class="th">部位</div>
</div>
<div class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
<div class="item" v-for="(item,index) in dataList" :key="index">
<div class="th">{{item.typeName}}</div>
<div class="th">{{item.standardTypeName}}</div>
<div class="th">{{item.checkPartName}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:['param'],
data() {
return {
dataList: [],
params: {
orgId: "",
startDatetime: '',
endDatetime: '',
pageNum: 0,
pageSize: 30
},r
};
},
methods: {
load: function() { ... },
},
created() {
this.params.orgId = this.currentOrg.id;
//此处使用已有的封装组件通过父组件传过来的值去确定时间
this.params.startDatetime = this.$utils.getDayTimeAround(this.param)[0];
this.params.endDatetime = this.$utils.getDayTimeAround(this.param)[1];
},
};
</script>
此时问题来了
我本以为这样就可以成功获取父组件传过来的正确时间标记,然后转化为对应的事件,但是点开接口一看,两个时间的值一九四设置的空值 ,我在create()里打印param,结果值都没有,我直接???
在简单思考一下之后,我想到了一个东西,没错就是 监听属性,于是我加了了这么一段代码
watch:{
param(newVal,oldVal){
this.param= newVal;
this.params.startDatetime = this.$utils.getDayTimeAround(this.param)[0];
this.params.endDatetime = this.$utils.getDayTimeAround(this.param)[1];
}
},
再回头去看,时间是正确了,但是element的无限滚动并未执行load()方法
<div class="infinite-list" v-infinite-scroll="load" style="overflow:auto">...</div>
然后我在这里加上了
watch:{
param(newVal,oldVal){
this.param= newVal;
this.params.startDatetime = this.$utils.getDayTimeAround(this.param)[0];
this.params.endDatetime = this.$utils.getDayTimeAround(this.param)[1];
this.load()
}
},
再去运行,好像没啥毛病,这大概就是问题的始末了,虽然需求是解决了,但是没找到问题的原因,
1.理论上在create()里,应该是已经有父组件传过来的值了,为什么打印为空?
2.无限滚动为什么没有在弹窗点开时触发load()方法请求数据?
先在此记录下这俩问题,日后来填坑,要是有知道原因的朋友也欢迎留言交流
项目 | Value |
---|---|
问题 | 2 |
状态 | 已解决 |
原因 | 未明 |
记录时间:2020-07-30
填坑时间:2020-11-03 实际上上文中的watch实属多余了,出现问题的原因在于父组件页面引用组建的初始状态是错误的。。。不能太粗心了