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

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

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

<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实属多余了，出现问题的原因在于父组件页面引用组建的初始状态是错误的。。。不能太粗心了