uniapp组件封装导入时失败

Question

我在uniapp中将这段代码封装成一个组件，但是在另一个页面导入时不显示完全是怎么回事？

<template>
    <view class="main">
        
        <view class="date-block">
            <view class="date-title">
                <view>预约日期</view>
                <view>已选择日期:{{current_date}}</view>
            </view>
            
            <view class="date-main">
                <block v-for="(item,index) in dateTimes" v-bind:key="index" >
                    <view class="date" :class="[current_date == item.data?'selected':'']" @click="clickDay(item.data)">
                        <view class="week">{{item.week}}</view>
                        <view class="days" :class="[current_date == item.data?'selected2':'no_selected2']">{{item.day}}</view>
                    </view>
                </block>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                dateTimes:[],
                current_date:""
            }
        },

        methods: {
            
            clickDay:function(data){
                this.current_date = data
            },
            
            // 获取7天
            getWeekqq(dateString) {
                var weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];  
                var myDate = new Date(Date.parse(dateString));  
                return weekDay[myDate.getDay()]
            },
            //格式化日期
            formatDate:function(year,mon,day){
                return `${year}年${mon >= 10 ? mon : '0' + mon}月${day >= 10 ? day : '0' + day}日`;
            },
            getTime() {
                var date = new Date();
                var base = Date.parse(date); // 转换为时间戳
                var year = date.getFullYear(); //获取当前年份
                var mon = date.getMonth() + 1; //获取当前月份
                var day = date.getDate(); //获取当前日
                var oneDay = 24 * 3600 * 1000
                
                var daytimeArr = [
                    {
                        data: this.formatDate(year,mon,day),
                        week: this.getWeekqq(`${year}-${mon >= 10 ? mon : '0' + mon}-${day >= 10 ? day : '0' + day}`),
                        day: day
                    }
                ]
                this.current_date = this.formatDate(year,mon,day)
                
                for (var i = 1; i < 7; i++) { //今天以及后6天
                    var now = new Date(base += oneDay);
                    var myear = now.getFullYear();
                    var month = now.getMonth() + 1;
                    var mday = now.getDate()
                    daytimeArr.push({
                        data: this.formatDate(myear,month,mday),
                        week: this.getWeekqq([myear, month >= 10 ? month : '0' + month, mday >= 10 ? mday : '0' + mday].join('-')),
                        day: mday
                    })
                }
                return daytimeArr
            },
        },
        onLoad() {
            this.dateTimes = this.getTime()
        }
    }
</script>

```css
<style>
    page{
        background: #e5e5e5;
    }
    .selected{
        color: #c1510b;
        border-bottom: 4rpx solid #c1510b;
    }
    .selected2{
        background:#c1510b ;
        color: white;
    }
    .no_selected2{
        background:#e5e5e5 ;
        color: #565656;
    }
    
    .date-block {
        background: white;
        padding-bottom: 10rpx;
    }
    .date-block .date-title{
        display: flex;
        justify-content: space-between;
        padding: 26rpx 20rpx;
        border-bottom: 1rpx solid #a9a9a9;
        
    }
    .date-block .date-title view:first-child{
        font-size: 34rpx;
        color: #c1510b;
        font-weight: bold;
    }
    .date-block .date-title view:last-child{
        font-size: 32rpx;
        
    }
    
    .date-main{
        display: flex;
    }
    .date-main .date{
        text-align: center;
        padding:20rpx 10rpx 10rpx 10rpx;
        width: 14%;
        
    }
    .date-main .date .week{
        margin-bottom: 10rpx;
        font-size: 28rpx;
        font-weight: bold;
    }
    .date-main .date .days{
        margin: auto;
        text-align: center;
        width: 60rpx;
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 50%;
        /* background: #ebebeb; */
    }
    
</style>

组件效果图如下：

![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/a3ed9f9c2a90470f973a704361411897.png "#left")


另一个页面导入组件的代码：


```html
<template>
    <view>
        <Date></Date>
    </view>

</template>

<script>
    import Date from '@/components/Date.vue';
    export default {
        components: {
            Date,
        },
    }
</script>

导入后的效果图如下：

Answer 1

1.首先你这

onLoad() {
            this.dateTimes = this.getTime()
        }

代码应该写在methods外面，而不应该写在methods里面
2.要注意onLoad与mounted的区别：
在uniapp中，组件的onLoad和Vue的mounted都是生命周期钩子，但它们的触发时机和使用场景有所不同，onLoad更早被调用，因此如果你需要在组件加载时进行数据获取，使用onLoad会更合适。而mounted在组件渲染完成后被调用，如果你需要操作DOM或依赖DOM的状态进行某些操作，使用mounted会更合适，这里使用onLoad会不执行，应该使用mounted。