vue.js里组件接口设置问题

Question

1.做别的任务时候写了个日期组件，目前的方式是通过props传递基础值。
2.如果需要后期定制，比如修改格式，对日期值进行一定判断等等操作，相关代码逻辑写在哪里比较好怎么写？从可复用的角度来说写在引用位置好一点但是又不知道通过哪种方式好一点？？

父组件的代码
<label>
    问题截止日期  <input type="text" :readonly="readOnly" @focus="dateShow=true" v-model="date">
</label>
    <date-picker :date-show.sync="dateShow" :date.sync="date"></date-picker>
    

日期组件

<template>
    <div class="date" v-show="dateShow">
        
        <div class="date-header">
            <span class="date-header-left" @click="setCurrentD('minus')">&lt;</span>
            <span class="date-header-right" @click="setCurrentD('plus')">&gt;</span>
            <p class="date-header-midlle" @click="changeDate">
                <span v-show="dateYearShow">
                    {{ yearVarRange}}-{{ yearVarRange+11 }}
                </span>
                <span v-show="!dateMonthShow & !dateYearShow">
                    {{ monthFormat[curMonth] }}&nbsp;&nbsp;
                </span>
                <span v-show="!dateYearShow">
                    {{ curYear }}
                </span>
            </p>            
        </div>

        <div class="date-inner">

            <div v-for="week in weekFormat " class="date-week-header date-cell" v-show="!dateMonthShow && !dateYearShow">
                {{ week }}
            </div>

            <div v-for="month in monthFormat" v-show="dateMonthShow" class="date-select" @click="setCurrent('Month',$index)">
                {{month}}                        
            </div>

            <div v-for="year in 12" class="date-select" track-by="$index" v-bind:class="[($index==0 || $index==11) ? 'beyond' : '' ]" v-show="dateYearShow" @click="setCurrent('Year',yearVarRange+year)">
                {{ yearVarRange+year }}
            </div>
        </div>

        <div class="date-inner" v-show="!dateMonthShow && !dateYearShow">
            <div v-for="decade in weeknum" class="date-cell">
                {{ beginDay+decade }}
            </div>
            <div v-for="day in totalDay" class="date-cell" @click="setCurrent('Day',day+1)">
                {{ day+1}}
            </div>
            <div v-for="future in futureDayNum" class="date-cell">
                {{ future+1 }}
            </div>
            
        </div>
        
    </div>
</template>
<script>
    export default{
        props:['dateShow','date'],
        data(){
            return{
                monthFormat:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
                weekFormat:['日','一','二','三','四','五','六'],
                
                preTotalDay:0,    //上月的总天数
                totalDay:0,    //当月的总天数
                weeknum:0,    //当前的星期数，如星期四，则该值为4

                beginDay:0,    //日历上月显示出来起始值
                futureDayNum:0,    //日历下月显示出来的天数
                
                today:new Date(),    //获取当前时间
                curYear:0,    //当年年份
                curMonth:0,    //当前月份,如9月则该值为8
                curDay:1,    //当前日期
                

                dateFormat:"",
                dateSelectedStr:"",
                
                dateMonthShow:false, //月份选择控制开关
                dateYearShow:false,    //年份选择控制开关

                changeType:"Month",    //左右按键每次值变化的type  "year" or "month"
                changeNum:1,    //左右按键每次值变化的多少

            }

        },
        created(){
            this.init();
        },
        computed:{
            yearVarRange:function(){        
                return (parseInt(this.curYear/10))*10-1    
            }
        },
        methods:{
            //使用当前日期初始化日历
            init:function(){
                //初始化日历标题
                this.curYear=this.today.getFullYear();
                this.curDay=this.today.getDate();
                this.curMonth=this.today.getMonth();

                this.getInnerDay();
                
            },
            getInnerDay:function(){

                var year=this.curYear;
                var month=this.curMonth;

                this.preTotalDay=new Date(year,month,0).getDate();
                
                this.totalDay=new Date(year,month+1,0).getDate();
                
                this.weeknum=new Date(year,month,1).getDay();
                
                this.beginDay=this.preTotalDay-this.weeknum+1
                
                var count=this.totalDay+this.weeknum;

                this.futureDayNum=Math.ceil(count/7)*7-count;
                
            },
            changeDate:function(){
                console.log(this.dateMonthShow,this.dateYearShow)
                if( this.dateMonthShow==false && this.dateYearShow==false ){
                    this.dateMonthShow=true
                    this.changeType='Year'
                }
                else if( this.dateMonthShow==true && this.dateYearShow==false){
                    this.dateYearShow=true;
                    this.dateMonthShow=false;
                    this.changeNum=10;
                }
            },
            setCurrent:function(type,value){

                this['cur'+type]=value;
                this.getInnerDay();
                if(type=="Year")
                {
                    this.dateYearShow=false;
                }
                else if(type=="Month")
                {
                    this.dateMonthShow=false;
                }
                else if(type=="Day"){
                    this.dateShow=false
                    this.date=new Date(this.curYear,this.curMonth,this.curDay)
                }
                
                
            },
            setCurrentD:function(type){
                console.log(11111);
                if(this.changeType=='Mouth'){
                    switch(type){
                        case 'plus':
                            if(this.curMonth+this.changeNum>12){
                                this.curMonth=this.curMonth-12
                                this.curYear+=1
                            }
                            break;
                        case 'minus':
                            if(this.curMonth-this.changeNum<1){
                                this.curMonth+=12
                                this.curYear-=1
                            }
                            break;
                    }
                }else if(this.changeType="Year"){
                    switch(type){
                        case 'plus':
                            this.curYear+=this.changeNum
                            break;
                        case 'minus':
                            this.curYear-=this.changeNum
                    }
                }
            }
            
        }
    }
</script>
<style>
    .date{
        width: 300px;
        line-height: 40px;
        text-align: center;
        border:1px solid #ccc;
    }
    .date-inner div{
        display: inline-block;
    }
    .date-header-middle{
        width:50%;
        margin:0 auto;
    }
    .date-header-middle :active,
    .date-header-middle :hover{
        background: yellow;
    }
    .date-header-left{
        float: left;
        margin-left: 1rem;
    }
    .date-header-right{
        float: right;
        margin-right: 1rem;
    }
    .date-select{
        width: 16.66666666%;
    }
    .date-cell{
        width: 14%;
    }
    .date-week-header{
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }



</style>

Answer 1

• 对于数据，通过 props 暴露接口

• 对于 html，提供 slot 以便调用者能修改其中可变部分

• 对于样式，如果只是已知的有限种，可以尝试用 props 控制，否则，约定好 css 类的命名，让调用者直接 css 覆写