vue子组件修改父组件传递的变量(自定义日期时间组件,时间间隔为15分钟或者一个小时)

vue子组件修改父组件传递的变量

子组件不能直接修改父组件变量的值,但是可以通过调用父组件的方法来修改。

实现步骤

在父组件声明变量

export default {
  data() {
    return {
		startTime:"",
		......
	},
	......
  }
}

在父组件使用子组件并传递数据,修改变量

......
<!-- :startValue传值,@editStartValue修改父组件变量方法editStartTime -->
<date-time-picker 
	:startValue="startTime" 
	@editStartValue="editStartTime">
</date-time-picker>
......
export default {
  ......
  methods: {
		editStartTime(val){
			this.startTime=val;
		}
  }
}

在子组件中接收值,并调用父组件方法修改父组件的变量

//接收变量值
props: {
    startValue: {
      type: String,
      default: "",
    },
    ......
}
//调用父组件方法将值传给父组件
editStartValue() {
	this.$emit("editStartValue", '2023-08-02 00:00:00');
},

以上步骤只是逻辑步骤和部分代码,以下有完整代码:

父组件

<template>
  <div>
  	
  	<date-time-picker 
  		:particle="particle" 
  		:startValue="startTime" 
  		:endValue="endTime" 
  		@editStartValue="editStartTime" 
  		@editEndValue="editEndTime">
    date-time-picker>
  div>
template>

<script>
//引入子组件
import dateTimePicker from './date-time-picker.vue';
export default {
  components: { dateTimePicker },
  data() {
    return {
    	//1:时间组件的时间间隔为15分钟,
    	//2:时间组件的时间间隔为1小时,
    	//3:时间组件只能选择日期,不能选择时间,
		particle:"1",
		startTime:"",
		endTime:"",
	},
	methods: {
		editStartTime(val){
			this.startTime=val;
		},
		editEndTime(val){
			this.endTime=val;
		},
	}
  }
}
script>

子组件

<template>
  <div>
    
    <el-time-select
      v-model="startTime"
      style="width: 135px"
      :picker-options="startTimeOptions"
      placeholder=""
      prefix-icon="false"
      @change="startTimeChange"
      ref="startTime"
    >
    el-time-select>
	
    <el-date-picker
      v-model="startDate"
      type="date"
      ref="startDate"
      placeholder=""
      style="width: 135px; margin-left: -135px"
      :picker-options="startDateOptions"
      @change="startDateChange"
      value-format="yyyy-MM-dd"
    >
    el-date-picker>
	
	
    <div
      @click="handleClickStart"
      style="width: 200px; margin-left: -135px; display: inline-block"
    >
      <el-input
        v-model="startInput"
        size="small"
        ref="startInput"
        :placeholder="placeholderStart"
        prefix-icon="el-icon-date"
      >
      el-input>
    div>

    
    <el-time-select
      v-model="endTime"
      style="width: 135px"
      :picker-options="endTimeOptions"
      placeholder=""
      prefix-icon="false"
      @change="endTimeChange"
      ref="endTime"
    >
    el-time-select>
	
    <el-date-picker
      v-model="endDate"
      type="date"
      ref="endDate"
      placeholder=""
      style="width: 135px; margin-left: -135px"
      :picker-options="endDateOptions"
      @change="endDateChange"
      value-format="yyyy-MM-dd"
    >
    el-date-picker>

	
    <div
      @click="handleClickEnd"
      style="width: 200px; margin-left: -135px; display: inline-block"
    >
      <el-input
        v-model="endInput"
        size="small"
        ref="endInput"
        :placeholder="placeholderEnd"
        prefix-icon="el-icon-date"
      >
      el-input>
    div>
  div>
template>
<script>
export default {
  props: {
    //particle为1时间间隔15分钟,为2时间间隔1小时,为3只能选择日期不能选择时间
    particle: {
      type: String,
      default: "",
    },
    startValue: {
      type: String,
      default: "",
    },
    endValue: {
      type: String,
      default: "",
    },
    placeholderStart: {
      type: String,
      default: "开始时间",
    },
    placeholderEnd: {
      type: String,
      default: "结束时间",
    },
  },
  watch: {
  	//监听时间粒度的变化,变化时将之前选择的值清空
    particle(newVal, oldVal) {
      this.startInput = "";
      this.endInput = "";
      (this.startDate = ""),
        (this.startTime = ""),
        (this.endDate = ""),
        (this.endTime = "");
    },
  },
  created(){
  	//页面创建时判断父组件是否传入默认值(格式:yyyy-MM-dd hh:mm:ss),传入时给日期和时间赋值
    this.startDate= (this.startInput!=""&&this.startInput.length===19)?this.startInput.substring(0,11):"",
    this.startTime= (this.startInput!=""&&this.startInput.length===19)?this.startInput.substring(11,16):"",
    this.endDate= (this.endInput!=""&&this.endInput.length===19)?this.endInput.substring(0,11):"",
    this.endTime= (this.endInput!=""&&this.endInput.length===19)?this.endInput.substring(11,16):""
  },
  data() {
    return {
      //父组件初始传默认值,将默认值赋值给展示变量
      startInput:(this.startValue!=null&&this.startValue!=undefined&&this.startValue.length===19)?this.timeFormat(this.startValue,this.particle):"",
      endInput:(this.endValue!=null&&this.endValue!=undefined&&this.endValue.length===19)?this.timeFormat(this.endValue,this.particle):"",
      startDate: "",
      startTime: "",
      endDate: "",
      endTime: "",
      //时间配置
      startTimeOptions: {
        start: "00:00",
        step: "01:00",
        end: "23:59",
        maxTime: "",
      },
      endTimeOptions: {
        start: "00:00",
        step: "01:00",
        end: "23:59",
        minTime: "",
      },
      //日期配置(开始时间大于结束时间,结束时间小于开始时间)
      startDateOptions: {
        disabledDate: (time) => {
          if (this.endDate != "") {
            var now = new Date(this.endDate + " 00:00:00");
            return time.getTime() > now.getTime();
          } else {
            return false;
          }
        },
      },
      endDateOptions: {
        disabledDate: (time) => {
          if (this.startDate != "") {
            var now = new Date(this.startDate + " 00:00:00");
            return time.getTime() < now.getTime();
          } else {
            return false;
          }
        },
      },
    };
  },
  methods: {
    //将传入的时间字符串改为对应的格式
    timeFormat(val,particle) {
      var str="";
      if (particle === "3") {
        str = val.substring(0, 13);
        var date = new Date(val);
        var minutes = date.getMinutes();
        if (minutes / 15 === 0) {
          str = str + ":00:00";
        }
        if (minutes / 15 === 1) {
          str = str + ":15:00";
        }
        if (minutes / 15 === 2) {
          str = str + ":30:00";
        }
        if (minutes / 15 === 3) {
          str = str + ":45:00";
        }
      }
      if (particle === "2") {
        str = val.substring(0, 13);
        str = str + ":00:00";
      }
      if (particle === "1") {
        str = val.substring(0, 11);
        str = str + "00:00:00"; 
      }
      return str;
    },

    //开始输入框点击事件
    handleClickStart() {
      if (this.startInput.length == 19) {
        this.startDate = this.startInput.substring(0, 11);
      } else {
        this.startDate = this.startInput;
      }
      this.$refs.startDate.focus();
    },
    //结束输入框点击事件
    handleClickEnd() {
      if (this.endInput.length == 19) {
        this.endDate = this.endInput.substring(0, 11);
      } else {
        this.endDate = this.endInput;
      }
      this.$refs.endDate.focus();
    },
    //选择开始日期后调出开始时间
    startDateChange() {
      if (this.startTime === "") {
        this.startInput = this.startDate + " 00:00:00";
      } else {
        this.startInput = this.startDate + " " + this.startTime + ":00";
      }
      this.editStartValue();
      if (this.particle != "3") {
        if (this.particle === "1") {
          this.startTimeOptions.step = "00:15";
        }
        if (this.particle === "2") {
          this.startTimeOptions.step = "01:00";
        }
        if (this.endInput.includes(this.startDate) && this.endTime != "") {
          this.startTimeOptions.maxTime = this.endTime;
        }
        this.$refs.startTime.focus();
      }
    },
    //选择开始时间后赋值给开始输入框
    startTimeChange() {
      this.startInput = this.startDate + " " + this.startTime + ":00";
      this.editStartValue();
    },
    //将值传给父组件
    editStartValue() {
      this.$emit("editStartValue", this.startInput);
    },

    //选择结束日期后调出结束时间
    endDateChange() {
      if (this.endTime === "") {
        this.endInput = this.endDate + " 00:00:00";
      } else {
        this.endInput = this.endDate + " " + this.endTime + ":00";
      }
      this.editEndValue();
      if (this.particle != "3") {
        if (this.particle === "1") {
          this.endTimeOptions.step = "00:15";
        }
        if (this.particle === "2") {
          this.endTimeOptions.step = "01:00";
        }
        if (this.startInput.includes(this.endDate) && this.startTime != "") {
          this.endTimeOptions.minTime = this.startTime;
        }
        this.$refs.endTime.focus();
      }
    },
    //选择结束时间后赋值给结束输入框
    endTimeChange() {
      this.endInput = this.endDate + " " + this.endTime + ":00";
      this.editEndValue();
    },
    //将值传给父组件
    editEndValue() {
      this.$emit("editEndValue", this.endInput);
    },
  },
};
script>

你可能感兴趣的:(vue.js,前端,javascript)