关于父子组件传值遇到的小问题

描述:需求是根据父组件传过来的参数进行提取然后发起请求,直接看代码比较值观

首先是父组件:
绑定了点击事件

<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 CSDN 皮肤主题: 游动-白 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值