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-selectv-model="startTime"style="width: 135px":picker-options="startTimeOptions"placeholder=""prefix-icon="false"@change="startTimeChange"ref="startTime"></el-time-select><!-- 开始日期 --><el-date-pickerv-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-inputv-model="startInput"size="small"ref="startInput":placeholder="placeholderStart"prefix-icon="el-icon-date"></el-input></div><!-- 结束时间------------------------------------- --><el-time-selectv-model="endTime"style="width: 135px":picker-options="endTimeOptions"placeholder=""prefix-icon="false"@change="endTimeChange"ref="endTime"></el-time-select><!-- 结束日期 --><el-date-pickerv-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-inputv-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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/24712.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Yolov5+Deepsort】训练自己的数据集（1）| 目标检测追踪 | 轨迹绘制

【Yolov5+Deepsort】训练自己的数据集（1）| 目标检测追踪 | 轨迹绘制

&#x1f4e2;前言&#xff1a;本篇是关于如何使用YoloV5Deepsort训练自己的数据集&#xff0c;从而实现目标检测与目标追踪&#xff0c;并绘制出物体的运动轨迹。本章讲解的为第一个内容&#xff1a;简单介绍YoloV5Deepsort中所用到的目标检测&#xff0c;追踪及sort&Depp…
阅读更多...
el-table 去掉边框（修改颜色）

el-table 去掉边框（修改颜色）

原始&#xff1a; 去掉表格的border属性&#xff0c;每一行下面还会有一条线&#xff0c;并且不能再拖拽表头 为了满足在隐藏表格边框的情况下还能拖动表头&#xff0c;修改相关css即可&#xff0c;如下代码 <style lang"less"> .table {//避免单元格之间出现白…
阅读更多...
UI自动化测试之Jenkins配置

UI自动化测试之Jenkins配置

背景&#xff1a; 团队下半年的目标之一是实现自动化测试&#xff0c;这里要吐槽一下&#xff0c;之前开发的测试平台了&#xff0c;最初的目的是用来做接口自动化测试和性能测试&#xff0c;但由于各种原因&#xff0c;接口自动化测试那部分功能整个废弃掉了&#xff0c;其中…
阅读更多...
Spring5.2.x 源码使用Gradle成功构建

Spring5.2.x 源码使用Gradle成功构建

一 前置准备 1 Spring5.2.x下载 1.1 Spring5.2.x Git下载地址 https://gitcode.net/mirrors/spring-projects/spring-framework.git 1.2 Spring5.2.x zip源码包下载&#xff0c;解压后倒入idea https://gitcode.net/mirrors/spring-projects/spring-framework/-/…
阅读更多...
【NLP概念源和流】 05-引进LSTM网络（第 5/20 部分）

【NLP概念源和流】 05-引进LSTM网络（第 5/20 部分）

一、说明 在上一篇博客中，我们讨论了原版RNN架构，也讨论了它的局限性。梯度消失是一个非常重要的缺点，它限制了RNN对较短序列的建模。香草 RNN 在相关输入事件和目标信号之间存在超过 5-10 个离散时间步长的时间滞时无法学习。这基本上限制了香草RNN在许多实际问题上的应用，…
阅读更多...
数学知识(三)

数学知识(三)

一、容斥原理 #include<iostream> #include<algorithm>using namespace std;const int N 20;typedef long long LL; int n,m; int p[N];int main() {cin>>n>>m;for(int i 0;i < m;i ) cin>>p[i];int res 0;//从1枚举到2^m(位运算)for(int …
阅读更多...
【C++】开源：事件驱动网络库libevent配置使用

【C++】开源：事件驱动网络库libevent配置使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍事件驱动库libevent配置使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xf…
阅读更多...
Dockerfile构建Tomcat镜像（源码）

Dockerfile构建Tomcat镜像（源码）

Dockerfile构建Tomcat镜像 目录 Dockerfile构建Tomcat镜像 1、建立工作目录 2、编写Dockerfile文件 3、构建镜像 4、测试容器 5、浏览器访问测试&#xff1a; 1、建立工作目录 [roothuyang1 ~]# mkdir tomcat[roothuyang1 ~]# cd tomcat/[roothuyang1 tomcat]# lsapach…
阅读更多...
【Python】基础数据结构：列表——元组——字典——集合

【Python】基础数据结构：列表——元组——字典——集合

文章目录 一、简述二、Python中的列表详解2.1 创建列表2.2 访问列表元素2.3 修改列表元素2.4 列表切片2.5 列表方法2.6 列表推导式 三、Python中的元组详解3.1 创建元组3.2 访问元组元素3.3 元组是不可变的3.4 元组切片3.5 元组方法 四、Python中的字典详解4.1 创建字典4.2 访问…
阅读更多...
华为HarmonyOS NEXT初体验，打造纯血鸿蒙指日可待，适配百款应用

华为HarmonyOS NEXT初体验，打造纯血鸿蒙指日可待，适配百款应用

在2023年的华为开发者大会&#xff08;HDC.Together&#xff09;&#xff0c;华为推出了面向开发者的HarmonyOS NEXT开发者预览版&#xff0c;此外还有面向消费者的HarmonyOS 4。华为宣布&#xff0c;HarmonyOS NEXT已开放给合作企业开发者&#xff0c;计划在2024年第一季度对所…
阅读更多...
多线程篇-线程安全-原子性、可见性、有序性解析

多线程篇-线程安全-原子性、可见性、有序性解析

多线程篇-线程安全-原子性、可见性、有序性解析 在程序中使用多线程的目的是什么&#xff1f; 1、提高效率&#xff0c;增加任务的吞吐量 2、提升CPU等资源的利用率&#xff0c;减少CPU的空转 多线程的应用在日常开发中很多&#xff0c;带来了很多的便利&#xff0c;让我们以前…
阅读更多...
Socket网络编程练习二

Socket网络编程练习二

从客户端发送文件到服务端&#xff0c;服务端保存到本地&#xff0c;并发送确认消息给客户端&#xff0c;并关闭相应的连接 package internet;import org.junit.Test;import java.io.*; import java.net.InetAddress; import java.net.ServerSocket; import java.net.Socket;/…
阅读更多...
Spring的AutoWrite自动装配

Spring的AutoWrite自动装配

一、概念 首先要了解一个思想就是IOC思想(控制反转)&#xff0c;由此我们便需要使用DI(依赖注入)&#xff0c;依赖注入可以注入对象、字符串、等等&#xff0c;在注入对象时&#xff0c;我们往往需要手动new一个对象进行注入&#xff0c;自动装配就是代替我们手动new对象这一过…
阅读更多...
图像快速傅里叶变换的工业应用案例简介：图像自相关，背景纹理去除，旋转矫正，划痕检测

图像快速傅里叶变换的工业应用案例简介：图像自相关，背景纹理去除，旋转矫正，划痕检测

快速傅里叶变换是非常重要的数学分析工具&#xff0c;同时也是一种非常重要的信号处理方法。 下面借助Halcon商业图像处理库&#xff0c;介绍些工业应用案例&#xff0c;我们可以通过案例理解图像快速傅里叶变换的一些应用场景。 案例1&#xff1a;图像自相关性确定芯片间距 …
阅读更多...
体育赛事管理系统的设计与实现(源码+论文)_kaic

体育赛事管理系统的设计与实现(源码+论文)_kaic

摘要 许多年以前&#xff0c;人们在对数据进行统计和记录时候&#xff0c;使用的是纸和笔&#xff0c;对于大量数据的记录很不方便&#xff0c;使用的人力物力也很庞大&#xff0c;到了现在&#xff0c;人们对纸和笔的依赖慢慢降低&#xff0c;在如今的互联网时代&#xff0c;…
阅读更多...
python爬虫1：基础知识

python爬虫1：基础知识

python爬虫1&#xff1a;基础知识 前言 ​ python实现网络爬虫非常简单&#xff0c;只需要掌握一定的基础知识和一定的库使用技巧即可。本系列目标旨在梳理相关知识点&#xff0c;方便以后复习。 目录结构 文章目录 python爬虫1&#xff1a;基础知识1. 基础认知1.1 什么是爬虫&…
阅读更多...
3.CNI网络

3.CNI网络

文章目录 CNI网络FlannelUDP模式VXLAN模式部署flannel CalicoCalico模式Calico部署 flannel 和 calico 区别 CNI网络 K8S 中 Pod 网络通信&#xff1a; Pod 内容器与容器之间的通信 在同一个 Pod 内的容器&#xff08;Pod 内的容器是不会跨宿主机的&#xff09;共享同一个网络命…
阅读更多...
Redis内网主从节点搭建

Redis内网主从节点搭建

Redis内网主从节点搭建 1、文件上传2、服务安装3、服务启动4、配置主从复制 1、文件上传 内网环境手动上传gcc-c、redis.tar文件 2、服务安装 # 解压 unzip gcc-c.zip unzip gcc_rpm.zip tar -zxvf redis-6.2.13.tar.gz# 安装 cd gcc_rpm/ rpm -ivh *.rpm --nodeps --force…
阅读更多...
【HDFS】每天一个RPC系列----complete（二）：客户端侧

【HDFS】每天一个RPC系列----complete（二）：客户端侧

上图给出了最终会调用到complete RPC的客户端侧方法链路（除去Router那条线了）。 org.apache.hadoop.hdfs.DFSOutputStream#completeFile(org.apache.hadoop.hdfs.protocol.ExtendedBlock)： 下面这个方法在complete rpc返回true之前，会进行重试，直到超过最大重试次数抛异…
阅读更多...
ChatGPT下架官方检测工具，承认无法鉴别AI内容

ChatGPT下架官方检测工具，承认无法鉴别AI内容

去年底&#xff0c;OpenAI 推出的 ChatGPT &#xff0c;带来了生成式人工智能涌现的热潮。它不仅能够协助完成撰写邮件、视频脚本、文案、翻译、代码等任务&#xff0c;还能通过学习和理解人类的语言来进行对话&#xff0c;并根据聊天的上下文进行互动。 但随之而来的争议也让人…
阅读更多...
最新文章

Copyright @ 2022~2023