时间选择组件封装

1、封装表格组件
在components文件下新建TimeEhoice.vue

<template>
  <div>
    <el-date-picker
         :clearable=false
          v-model="rangeDate"
          prefix-icon="el-icon-date"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small"
          value-format="yyyy-MM-dd"
          @change="dataChange"
    >
    </el-date-picker>
  </div>
</template>
 
<script>
  import {changeState} from '../api/faultAPI'

  export default {
    data() {
      return {
        rangeDate: [],
      }
    },
    methods: {
     // 选择日期
      dataChange(data) {
          this.$emit('dataChange', data);
        // console.log("datadata",data)
      },
    },
    props: {
      value: {
        type: String
      },//接受外部v-model传入的值
    },
    mounted(){

    }
  }
</script>

2、使用组件

1. 页面中引入组件

 import TimeEhoice  from '@/components/TimeEhoice.vue'
 components: {
   TimeEhoice
 },

2. 使用组件

<TimeEhoice @dataChange="dataChange" ref="timeData" class="disinline"></TimeEhoice>

// 时间选择
dataChange(data){
  console.log("时间选择",data);
},

//获取时间值
console.log("timeData",this.$refs.timeData.rangeDate)