app-date-range.vue

<template>
    <date-picker></date-picker>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
@Component({})
export default class AppDateRange extends Vue {

    /**
     * 当前值
     * 
     * @type {*}
     * @memberof AppSpan
     */
    @Prop() public value?: any;

    /**
     * 数据类型
     * 
     * @type {string}
     * @memberof AppSpan
     */
    @Prop({default: 'datetime'}) public type?: 'datetime' | 'date';

    /**
     * 是否禁用
     * 
     * @type {string}
     * @memberof AppSpan
     */
    @Prop({default: false}) public disabled?: boolean;

    /**
     * 日期值格式化
     * 
     * @type {string}
     * @memberof AppSpan
     */
    @Prop() public valueFormat?: string;

    /**
     * 传入表单数据
     *
     * @type {*}
     * @memberof AppSpan
     */
    @Prop() public data?: any;

    /**
     * 监控表单属性 data 值
     *
     * @memberof AppSpan
     */
    @Watch('data')
    onDataChange(newVal: any, oldVal: any) {
        if(newVal !== oldVal){
           console.log(newVal);
        }
    }
    
}
</script>

<style lang='scss'>
@import './app-date-range.scss';
</style>