vue子组件修改父组件传递的变量(自定义日期时间组件，通过粒度控制时间控件的时间间隔为15分钟或者一个小时，天，月)

已于 2025-06-30 15:11:45 修改
阅读量1.6k 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： vue.js 前端 javascript
于 2023-08-02 16:48:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42949219/article/details/132064812
文章讲述了在Vue应用中，如何让子组件通过调用父组件的方法来修改从父组件传递的数据，包括在父组件中声明变量，使用props接收和@emit触发父组件方法的详细步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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');
},

以上步骤只是逻辑步骤和部分代码，以下有完整代码：
我的这个自定义时间控件，可选择范围：
粒度为1时：时间组件的时间间隔为15分钟。
粒度为2时：时间组件的时间间隔为1小时。
粒度为3时：时间组件只能选择日期，不能选择时间。
粒度为4时：时间组件只能选择月份。

父组件

<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：时间组件只能选择日期，不能选择时间，
    	//4：时间组件只能选择月份
		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: 120px"
      :picker-options="startTimeOptions"
      placeholder=""
      prefix-icon="false"
      @change="startTimeChange"
      ref="startTime"
    >
    </el-time-select>

    <el-date-picker
      v-model="startDate"
      :type="dateType"
      ref="startDate"
      placeholder=""
      style="width: 120px; margin-left: -120px"
      :picker-options="startDateOptions"
      @change="startDateChange"
      value-format="yyyy-MM-dd"
    >
    </el-date-picker>

    <div
      @click="handleClickStart"
      style="width: 180px; margin-left: -120px; 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: 120px"
      :picker-options="endTimeOptions"
      placeholder=""
      prefix-icon="false"
      @change="endTimeChange"
      ref="endTime"
    >
    </el-time-select>

    <el-date-picker
      v-model="endDate"
      :type="dateType"
      ref="endDate"
      placeholder=""
      style="width: 120px; margin-left: -120px"
      :picker-options="endDateOptions"
      @change="endDateChange"
      value-format="yyyy-MM-dd"
    >
    </el-date-picker>

    <div
      @click="handleClickEnd"
      style="width: 180px; margin-left: -120px; 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) {
      //月粒度时，日期类型为month,其他粒度时日期类型为date
      if(newVal==="4"){
        this.dateType="month";
      }else{
        this.dateType="date";
      }
      this.startInput = "";
      this.endInput = "";
      (this.startDate = ""),
        (this.startTime = ""),
        (this.endDate = ""),
        (this.endTime = "");
    },
  },
  created(){
    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):""
    this.editStartValue();
    this.editEndValue();
    // console.log("-----"+this.startInput+"-----");
    // console.log("-----"+this.endInput+"-----");
    // console.log("-----"+this.startDate+"-----");
    // console.log("-----"+this.startTime+"-----");
    // console.log("-----"+this.endDate+"-----");
    // console.log("-----"+this.endTime+"-----");
  },
  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):"",
      dateType: "date",
      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"||particle === "4") {
        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 {
        if(this.particle==="4"&&this.startInput!=""){
          this.startDate = this.startInput+"-01";
        }else{
          this.startDate = this.startInput;
        }
      }
      this.$refs.startDate.focus();
    },
    //结束输入框点击事件
    handleClickEnd() {
      if (this.endInput.length == 19) {
        this.endDate = this.endInput.substring(0, 11);
      } else {
        if(this.particle==="4"&&this.endInput!=""){
          this.endDate = this.endInput+"-01";
        }else{
          this.endDate = this.endInput;
        }
      }
      this.$refs.endDate.focus();
    },
    //选择开始日期后调出开始时间
    startDateChange() {
      if (this.startTime === "") {
        //this.startTime="00:00";
        this.startInput = this.startDate + " 00:00:00";
      } else {
        this.startInput = this.startDate + " " + this.startTime + ":00";
      }

      //月粒度展示YYYY-MM-DD，其余粒度展示YYYY-MM-DD HH:MM:SS
      if(this.particle==="4"||this.particle==="3"){
        this.startInput=this.startInput.substring(0,10)+" 00:00:00";
      }

      this.editStartValue();
      if (this.particle != "3"&&this.particle != "4") {
        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;
        }else{
          this.startTimeOptions.maxTime ="";
        }
        this.$refs.startTime.focus();
      }
    },
    //选择开始时间后赋值给开始输入框
    startTimeChange() {
      this.startInput = this.startDate + " " + this.startTime + ":00";
      this.editStartValue();
    },
    //将值传给父组件
    editStartValue() {
      this.$emit("editStartValue", this.startInput);
      if(this.particle==="4"){
        this.startInput=this.startInput.substring(0,7);
      }else if(this.particle==="3"){
        this.startInput=this.startInput.substring(0,10);
      }
      
    },

    //选择结束日期后调出结束时间
    endDateChange() {
      if (this.endTime === "") {
        //this.endTime="00:00";
        this.endInput = this.endDate + " 00:00:00";
      } else {
        this.endInput = this.endDate + " " + this.endTime + ":00";
      }

      //月粒度展示YYYY-MM-DD，其余粒度展示YYYY-MM-DD HH:MM:SS
      if(this.particle==="4"){
        this.endInput=this.$util.getEndOfMonth(this.endInput.substring(0,10))+" 23:59:59";
      }
      if(this.particle==="3"){
        this.endInput=this.endInput.substring(0,10)+" 23:59:59";
      }

      this.editEndValue();
      if (this.particle != "3"&&this.particle != "4") {
        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;
        }else{
          this.endTimeOptions.minTime = "";
        }
        this.$refs.endTime.focus();
      }
    },
    //选择结束时间后赋值给结束输入框
    endTimeChange() {
      this.endInput = this.endDate + " " + this.endTime + ":00";
      this.editEndValue();
    },
    //将值传给父组件
    editEndValue() {
      this.$emit("editEndValue", this.endInput);
      if(this.particle==="4"){
        this.endInput=this.endInput.substring(0,7);
      }else if(this.particle==="3"){
        this.endInput=this.endInput.substring(0,10);
      }
    },
  },
};
</script>
黎明晓月
关注
FullCalendar日历组件集成实战（5）
学海无涯，行者无疆
05-15 1883
有一些应用系统或应用功能，如日程管理、任务管理需要使用到日历组件。虽然Element Plus也提供了日历组件，但功能比较简单，用来做数据展现勉强可用。但如果需要进行复杂的数据展示，以及互动操作如通过点击添加事件，则需要做大量的二次开发。FullCalendar是一款备受欢迎的开源日历组件，以其强大的功能而著称。其基础功能不仅免费且开源，为开发者提供了极大的便利，仅有少量高级功能需要收费。
FullCalendar日历组件集成过程合订版
学海无涯，行者无疆
07-19 2105
FullCalendar是一款备受欢迎的开源日历组件，以其强大的功能而著称。其基础功能不仅免费且开源，为开发者提供了极大的便利，仅有少量高级功能需要收费。然而，尽管该组件功能卓越，其文档却相对简洁，导致在集成过程中需要开发者自行摸索与探索，这无疑增加了不少学习和验证的时间成本。 为此，本文通过日程管理系统的真实案例，手把手带你了解该组件的属性和功能，通过需求导向的方式，详细阐述FullCalendar组件的集成思路和实用解决方案。 在介绍过程中，我们将重点关注集成要点和注意事项，力求帮助开发者在集成过程中少
vue中如何让子组件修改父组件数据
08-27
主要介绍了vue中子组件修改父组件数据的相关资料，文中介绍了vue中watch的认识，关于子组件修改父组件属性认识，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue子组件修改父组件的值
Death Note
10-22 3455
点击关闭按钮，关闭组件时，控制台报出如下错误：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “visible”。
vue中子组件间接修改父组件传递过来的值
铁锤妹妹的博客
02-26 9528
父组件传递值给子组件是单向数据绑定; 子组件不能直接修改父组件的数据，但是可以间接修改数据。
Vue2—子组件修改父组件值的方法
最新发布
weixin_43488503的博客
03-04 927
在 Vue 2 中，子组件不能直接修改父组件的值，因为 Vue 遵循单向数据流的原则。父组件通过 props 向子组件传递数据，子组件通过 $emit 触发事件来通知父组件修改数据。子组件：通过 this.$emit(‘update:propName’, newValue) 更新父组件的数据。如果子组件需要修改父组件的一个特定值（通常是表单控件），可以使用 v-model。父组件：通过 props 向子组件传递数据，并监听子组件的事件。子组件：通过 $emit 触发事件，并将新值传递给父组件。
子组件改变父组件的变量 (记录)
一位00后记录自己的前端成长路上遇到的坑 ~
11-10 497
⛳️： 子组件改变父组件的变量 (记录)😇：💗： 前端小白的成长之路，一起学习，一起成长~1.平常在子组件中如果操作父组件变量，惯例是在子组件emit一个事件，然后在父组件的处理方法中去修改该值，但是这样写太麻烦了，因此，我们使用了.sync修饰符，然后约定子组件使用$emit(‘update:某变量’，传入的变量)，让父组不用写处理方法就可以修改num变量。
Vue.js组件开发全面指南：从基础到高级应用
阿尔法星球的专栏
10-30 1909
组件的模板是定义组件如何展示给用户的蓝图。在Vue.js中，模板是声明式的，它告诉Vue.js如何根据组件的状态生成HTML。模板由HTML代码和Vue.js的指令组成，这些指令扩展了HTML的功能，使得开发者能够创建动态的、响应式的数据绑定。模板语法：Vue.js模板支持HTML代码，并在其基础上增加了一些特殊的语法，如指令（v-开头的属性），过滤器（管道符），和插值表达式（花括号{{ }}这些语法使得模板能够响应数据的变化，并动态地渲染内容。模板内容：模板中的内容可以是静态的，也可以是动态的。
Vue.js前端框架教程4：Vue响应式变量和指令（Directives）
Cachel Wood的博客
12-18 1174
是指令（Directives），它们用于在模板中创建响应式数据绑定和事件处理。之间的双向绑定，这意味着当响应式变量的值发生变化时，视图会自动更新以反映这些变化。的响应式系统提供了更多的灵活性和功能，使得状态管理更加直观和强大。函数返回的对象中的属性来创建的。用于创建一个响应式的引用，它包装了一个值，使得这个值是响应式的。用于创建一个响应式的对象，对象的所有属性都是响应式的。用于侦听响应式变量的变化，并在变化时执行某些操作。，提供了更多的响应式变量创建方式，包括。：用于根据表达式的真假值切换元素的显示。
Vue 3组件设计模式：提高代码复用性与可维护性的秘诀
在开始深入探讨组件内部机制前，本章将首先提供一个Vue 3组件设计模式的总览。我们将简单回顾组件的基本概念，并且引入Vue 3中的新特性，比如Composition API，以及它们如何影响我们的编码实践。 ## 组件设计模式的...
子组件修改父组件数据方法
qq_18390335的博客
02-24 3215
prop是单向绑定，不能更改数据，只能由父组件传输过来 解决 1、可以在子组件中 声明一个中间变量（value），把父组件传过来的值(item)赋值给中间变量(value),当单选切换时修改的数据为value,就不会报错 2、使用.sync修饰符与$emit(update:xxx) 父组件 < synechange :statuType.sync=“statuType”></> 子组件 this.$emit(‘update:statuType’,text) ...
vue组件子组件修改变量同步修改父组件
Aucanon的博客
12-25 698
父组件中绑定传递的值使用v-modle 然后子组件中可以使用update:(变量name)的emit事件直接修改父组件中传递给子组件的值。
vue 子组件修改父组件变量问题
weixin_30570101的博客
06-21 961
　　昨天遇到一个这样的场景， 主页面引用了一个子页面，子页面有个Redio选择，2个选项。 　　默认的，会从父组件传递一个参数给子组件作为默认值，实现默认选中效果，以及用来做反选。 　　开始没什么问题，页面都摆上去了，但是当我点击进行选择的时候，console控制器抛出异常了，提示我不能在子组件里修改父组件传递过来的值。 　　网上查证了一番，原因是父组件往子组件传值默认是单向绑定的，不...
Vue 子组件修改父组件传递过来的值
coldriversnow的专栏
05-25 2715
一般通过子组件修改父组件传递过来的值,我们就会采用props和$emit进行单向数据绑定。通过.sync修饰符在子组件中修改。使用v-model双向数据绑定。
通过子组件修改父组件内的值
qq_38368356的博客
11-26 781
1.先在components下创建一个新的vue文件，添加一些基本的配置。 2.在父组件中引用这个新创建的vue并注册 import SelectItem from &quot;./SelectItem&quot; export default{ components:{SelectItem} } 3.在子组件div里定义一个class名，并添加一个click事件，此事件是申请修改父组件值的程序;并给此事件...
VUE子组件如何改变父组件传来的值，以及VUE子组件如何修改父组件的值，以及父组件修改子组件的值
weixin_60414376的博客
04-17 3万+
一）子组件修改父组件传来的值： 父组件传递给我一个名为deptName数据，但是现在我要在子组件中修改它的值并且实时更新页面，直接this.deptName是不能直接修改他的值的，所以我采用了使用一个中间变量来接受的方式对齐进行修改： 1、父组件： 2、子组件： 在data中定义一个变量接受，然后将其赋值为this.deptName即可，之后就可以正常修改data的方法对齐进行修改了。 二）子组件修改父组件中的值： 我要删除一个值，这个逻辑是在子组件进行的，所以父组件的数组中值没.
vue中子组件更改父组件数据
热门推荐
ct5211314的博客
04-20 3万+
因为vue是单项数据流，所以没办法直接在子组件中去修改父组件里面的数据，vue提倡单项数据流，为了防止项目过于复杂时，导致数据流难以理解。引用Vue的官网的话：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。所以在项目开发过程中，我们总是通过子组件触发父组件中方法的方式，通过父组件的方法，更改父组件的数据。 一、props传递方法 通过props的方式，将父组件的方法传递到子组件，在子组件中通过p...
vue-自定义事件之—— 子组件修改父组件的值
吴小花的博客
03-07 6981
vue-自定义事件之—— 子组件修改父组件的值 如何利用自定义的事件，在子组件中修改父组件里边的值？ 关键点记住：三个事件名字 步骤如下： 这里，相对本案例，父组件定义为Second-module，对应的子组件是Three-module 第一步：你要想改动父组件的值，你父组件得先有值让你改吧！所以， 　　在父组件定义值： 第二步：同样的，二者之间咋就成了父子关系了呢...
vue子组件修改父组件中变量的值——实现子组件控制父组件弹出对话框
WEN_Windy的博客
01-16 2569
本文内容参考链接：https://www.cnblogs.com/padding1015/p/7878741.html 弹出框使用ElementUI中表单对话框的样式，实现点击用户注册后，header组件获取main组件中dialogFormVisible的值来控制main组件中表单对话框的弹出。 如果直接将表单对话框放在header组件，表单因为header长宽太小变形了，于是，就将对话框放...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值