时间组件（日，月，年）

父组件：

        <div class="clock">
          <!-- :changeType="changeType" -->
          <timeTab v-model="query.alarmTimeValue" @datetimeChange="timeChange">
          </timeTab>
        </div>







        timeChange(val) {
          this.query.alarmTimeValue = val; // 在父组件得到时间
         },

子组件：

<template>
  <!-- 日 月  年 时间选择控件封装 -->
  <div class="datetimepicker">
    <el-select
      popper-class="selectClass"
      v-model="selectType"
      @change="dateTypeSelectChange"
      :popper-append-to-body="false"
      placeholder="请选择"
      style="width: 65px"
    >
      <el-option label="日" value="1"></el-option>
      <el-option label="月" value="2"></el-option>
      <el-option label="年" value="3"></el-option>
    </el-select>

    <el-date-picker
      v-if="selectType === '1'"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      v-model="listQuery.day"
      @change="dayChange"
      popper-class="date-style"
      type="date"
      placeholder="选择日"
    ></el-date-picker>

    <el-date-picker
      v-if="selectType === '2'"
      v-model="listQuery.month"
      type="month"
      format="yyyy-MM"
      value-format="yyyy-MM"
      :editable="false"
      popper-class="date-style"
      @change="monthChange"
      placeholder="选择月"
    ></el-date-picker>

    <el-date-picker
      v-if="selectType === '3'"
      v-model="listQuery.year"
      type="year"
      format="yyyy"
      value-format="yyyy"
      popper-class="date-style"
      :editable="false"
      @change="yearChange"
      placeholder="选择年"
    ></el-date-picker>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  data() {
    return {
      selectType: "1", // 日月年选择
      listQuery: {
        day: dayjs().format("YYYY-MM-DD"),
        month: dayjs().format("YYYY-MM"),
        year: dayjs().format("YYYY"),
      },
    };
  },

  props: {
    // value: String,
    changeType: Boolean,
  },
  watch: {
    changeType: {
      handler(newName, oldName) {
        this.listQuery.day = dayjs().format("YYYY-MM-DD");
      this.listQuery.month = dayjs().format("YYYY-MM");
      this.listQuery.year = dayjs().format("YYYY");
      },
      deep: true, //深度监听
      // immediate: true, //初次绑定执行
    },
  },
  methods: {
    dateTypeSelectChange(val) {
      this.selectType = val;
      this.listQuery.day = "";
      this.listQuery.month = "";
      this.listQuery.year = "";
    },

    dayChange(val) {
      val = val || "";
      // 通信方式一
      // 父组件通过v-model传递值给子组件时，会自动传递一个value的prop属性，在子组件中通过this.$emit('input',val)自动修改为父组件中v-model绑定的值
      this.$emit("input", val);
      // 通信方式二：子组件中的日期改变时，触发父组件中绑定的datetimeChange自定义事件
      this.$emit("datetimeChange", val);
    },
    monthChange(val) {
      val = val || "";
      this.$emit("input", val);
      this.$emit("datetimeChange", val);
    },
    yearChange(val) {
      val = val || "";
      this.$emit("input", val);
      this.$emit("datetimeChange", val);
    },
  },
  mounted() {},
};
</script>
<style lang="scss">
 .selectClass {
  width: 11%;
  border-color: rgb(8, 33, 101);
  background: 	#0d2042;
  .el-select-dropdown__list {
    overflow-y: auto;
  }
  .el-select-dropdown__empty {
    // background: rgba(17, 45, 87, 1);
    background: #0d2042;
    color: #879ec6;
    font-size: 0.072917rem /* 14/192 */;
    padding: 0.052083rem /* 10/192 */ 0;
  }
  .el-select-dropdown__item {
    height: 28px;
    line-height: 28px;
    color: #879ec6;
    font-size: 0.072917rem /* 14/192 */;
  }
  .el-select-dropdown__item.selected,
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background:#0d2042;
    color: #fff !important;
  }
}
 .date-style {
  color: #ffff;
  background: 	#0d2042;
  border: 1px solid #1384b4;
  .el-picker-panel__icon-btn {
    color: #ffff;
   }
  .el-date-picker__header-label{
  	color: #fff;
  }
  .el-date-table th {
      color:#ffff;
  }
}


</style>