vue封装组件之日期控件

最新推荐文章于 2024-09-06 23:59:38 发布

Zh.冠军

最新推荐文章于 2024-09-06 23:59:38 发布

阅读量737

点赞数

本文链接：https://blog.csdn.net/weixin_38673922/article/details/109118521

版权

comDataPicker.vue

<template>
  <div>
    <el-date-picker 
      :clearable="false" 
      v-model="dataPicker"
      type="date" 
      placeholder="选择日期" 
      value-format="yyyy-MM-dd"
      @change="dataChange">
    </el-date-picker>
  </div>
</template>
<script>
  export default {
    props: {
      datePickerObj: {
        type: Object
      }
    },
    data() {
      return {
        dataPicker:this.datePickerObj.年 + '-' + this.datePickerObj.月 + '-' + this.datePickerObj.日
      };
    },
    methods: {
      // 选择日期
      dataChange(data) {
        this.$emit("dataChange", data);
      },
    }
  };
</script>

父页面调用

        <el-form-item label="专利局发出通知的日期">
           <com-date-picker
             @dataChange="dataChange"
             :datePickerObj="obj.datepickerVal"
           ></com-date-picker>
         </el-form-item>

		import comDatePicker from "./comDatePicker";
		 components: {
		   comDatePicker,
		 }
   //接收子组件comDataPicker传过来的值
    dataChange(data) {

    },