【vue】组件复用小demo：日期组件

【需求描述】

最近有一批报表需要同期更换日期选择框的逻辑及样式，之前为了偷懒都是在单页面独自写的，更换起来甚是麻烦，于是重写了日期组件，方便复用，这说明偷的懒总有一天要还回来的。

现在通过这个小组件来复习一下组件的复用吧。

【代码实现】

#1#-> /components下创建子组件DateRangeSelect/index.vue

<template>
  <div>
    <el-date-picker
      v-model="start_date"
      type="date"
      placeholder="选择开始日期"
      :picker-options="pickerOptionsStart"
      :clearable="false"
      value-format="yyyy-MM-dd"
      size="mini"
      style="width: 140px"
      @change="handleStartChange"
    />
    -
    <el-date-picker
      v-model="end_date"
      type="date"
      placeholder="选择结束日期"
      :picker-options="pickerOptionsEnd"
      :clearable="false"
      value-format="yyyy-MM-dd"
      size="mini"
      style="width: 140px"
      @change="handleEndChange"
    />
  </div>
</template>

<script>
  export default {
    name: 'Index',
    props: {
      startDate: {
        type: String,
        default () {
          return ''
        }
      },
      endDate: {
        type: String,
        default () {
          return ''
        }
      }
    },
    data () {
      return {
        start_date: '',
        end_date: '',
        pickerOptionsStart: {
          disabledDate: time => {
            return time.getTime() > Date.now()
          }
        },
        pickerOptionsEnd: {
          disabledDate: time => {
            return time.getTime() > Date.now()
          }
        }
      }
    },
    watch: {
      startDate (val) {
        this.start_date = val
      },
      endDate (val) {
        this.end_date = val
      }
    },
    created () {
      this.start_date = this.startDate
      this.end_date = this.endDate
    },
    methods: {
      handleStartChange (val) {
        this.$emit('startchange', val)
      },
      handleEndChange (val) {
        this.$emit('endchange', val)
      }
    }
  }
</script>

#2#-> 父组件使用子组件

1. 在页面上引入子组件

import DateRange from '@/components/DateRangeSelect/index'

2. 注册子组件

components: {
    'date-range': DateRange
},

data () {
    return {
        queryInfo: {
          start_date: getNowFormatDate('-'),
          end_date: getNowFormatDate('-')
        }
    }
}

3. 在页面上放置子组件

<date-range
    :start-date="queryInfo.start_date"
    :end-date="queryInfo.end_date"
    @startchange="handleDateChange1"
    @endchange="handleDateChange2"
/>

4. methods里完善方法

handleDateChange1 (val) {
    this.queryInfo.start_date = val
},
handleDateChange2 (val) {
    this.queryInfo.end_date = val
},

【小结】

----参考----------

https://www.jianshu.com/p/99f490b76b03