vue 主组件把日期选择器给子组件props传obj值, 与子组件监听 watch对象或对象属性

1 主组件

1.1 :passObj 这种 非v-model ;  @change="DateChange"触发事件
<template>
<div class="date-picker-panel"><el-date-picker v-model="value2" type="datetimerange" :picker-options="pickerOptions" range-separator="至"start-placeholder='起始日期' end-placeholder='结束日期' @change="DateChange"></el-date-picker></div><div class="component-panel"><component :is="currentComponent" :passObj="passObj" ref="component"></component></div>
</template>
1.2 传递的是obj
passObj: {value2: [formatDate(minTs), formatDate(maxTs)],},
1.3 传值 激发事件
 DateChange(value) {  // 用来父传递值给子console.log('DateChange', value)this.passObj = { value2: value }},

2 子组件

2.1 props 接收值
 props: {passObj: {type: Object,required: true},},
2.2 监控值变化并打印值
 watch: {'passObj'(newValue) {console.log('日期选择器的值变为:', newValue);},},

3 注意事项

3.1 改变obj 监控obj
DateChange(value) {  // 用来父传递值给子console.log('DateChange', value)this.passObj = { value2: value }},
 watch: {'passObj'(newValue) {console.log('日期选择器的值变为:', newValue);},},
3.2 改变obj属性 监控obj属性
 DateChange(value) {  // 用来父传递值给子console.log('DateChange', value)this.passObj.value2 = value},
 watch: {'passObj.value2'(newValue) {console.log('日期选择器的值变为:', newValue);},},

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

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

相关文章

Web安全测试(三):SQL注入漏洞

一、前言 结合内部资料&#xff0c;与安全渗透部门同事合力整理的安全测试相关资料教程&#xff0c;全方位涵盖电商、支付、金融、网络、数据库等领域的安全测试&#xff0c;覆盖Web、APP、中间件、内外网、Linux、Windows多个平台。学完后一定能成为安全大佬&#xff01; 全部…

WSL2 window上高效运行Linux

1 WSL及优势 1.1 WSL简介 WSL&#xff08;Windows Subsystem for Linux&#xff09;是Windows操作系统中的一个功能&#xff0c;它允许用户在Windows环境下运行Linux应用程序。WSL提供了一个与Linux内核兼容的系统调用转发层&#xff0c;使得Linux二进制文件可以在Windows上直…

基于风险的漏洞管理

基于风险的漏洞管理涉及对即将被利用的漏洞的分类响应&#xff0c;如果被利用&#xff0c;可能会导致严重后果。本文详细介绍了确定漏洞优先级时要考虑的关键风险因素&#xff0c;以及确保基于风险的漏洞管理成功的其他注意事项。 什么是基于风险的漏洞管理对基于风险的漏洞管…

vue中html引入使用<%= BASE_URL %>变量

首先使用src相对路径引入 注意&#xff1a; js 文件放在public文件下 不要放在assets静态资源文件下 否则 可能会报错 GET http://192.168.0.113:8080/src/assets/js/websockets.js net::ERR_ABORTED 500 (Internal Server Error) 正确使用如下&#xff1a;eg // html中引…

(线特征)opencv+opencv contribute 配置

写一篇博客&#xff0c;记录开始线特征slam的历程。 在配置环境的时候&#xff0c;可以发现大多数都是用到了opencv3.4.16和其contribute版本&#xff0c;这里进行一个相关操作的教学。配置环境是在Ubuntu下面进行的&#xff0c;建议使用Ubuntu18来进行线特征的配置以及代码的…

8月27日,每日信息差

1、大众集团在美因发动机故障召回2018辆汽车。发动机连杆轴承可能损坏&#xff0c;导致发动机故障和熄火&#xff0c;从而增加撞车风险。经销商将对发动机进行检查&#xff0c;必要时免费更换发动机&#xff08;财联社&#xff09; 2、赛百味确认出售协议达成。美国快餐连锁店…

国产AI芯片突破,芯片或成白菜价,恐惧的美芯阻止台积电为它代工

日前消息指台积电大幅减少一家中国AI芯片企业的产能&#xff0c;原因在于国产AI芯片的性能已接近美芯&#xff0c;美国芯片企业NVIDIA与相关的资本机构贝莱德联手施压台积电所致&#xff0c;凸显出美国芯片忧虑中国AI芯片的竞争力。 这家国产AI芯片企业为壁仞科技&#xff0c;据…

【精算研究01/10】 计量经济学的性质和范围

一、说明 计量经济学是使用统计方法来发展理论或测试经济学或金融学中的现有假设。计量经济学依赖于回归模型和零假设检验等技术。计量经济学也可以用来预测未来的经济或金融趋势。 图片来源&#xff1a;https://marketbusinessnews.com 二、 计量经济之简介 计量经济学是对经济…

定义和实施需求基线

在传统的瀑布开发模式中&#xff0c;开发人员通常在初始阶段就确定需求并将之“冻结”&#xff0c;以便在不受需求变更影响的情况下进行开发。然而&#xff0c;实际经验告诉我们&#xff0c;这种方法在多数情况下并不适用&#xff0c;更为有效的方法是先建立需求基线&#xff0…

Spring MVC 学习总结

学习目标 了解 Spring MVC 是什么&#xff0c;为什么要使用它或者说它能解决什么问题&#xff0c;其与 Spring 是什么关系。理解为什么配置 Spring MVC 的前端控制器的映射路径为 “/” 会导致静态资源访问不了&#xff0c;掌握怎么处理这个问题。掌握基于注解方式使用 Spring…

有哪些前端调试和测试工具? - 易智编译EaseEditing

前端开发调试和测试工具帮助开发人员在开发过程中发现和修复问题&#xff0c;确保网站或应用的稳定性和性能。以下是一些常用的前端调试和测试工具&#xff1a; 调试工具&#xff1a; 浏览器开发者工具&#xff1a; 现代浏览器&#xff08;如Chrome、Firefox、Safari等&#…

深度学习2.神经网络、机器学习、人工智能

目录 深度学习、神经网络、机器学习、人工智能的关系 大白话解释深度学习 传统机器学习 VS 深度学习 深度学习的优缺点 4种典型的深度学习算法 卷积神经网络 – CNN 循环神经网络 – RNN 生成对抗网络 – GANs 深度强化学习 – RL 总结 深度学习 深度学习、神经网络…

Hbase-技术文档-java.net.UnknownHostException: 不知道这样的主机。 (e64682f1b276)

问题描述&#xff1a; 在使用spring-boot操作habse的时候&#xff0c;在对habse进行操作的时候出现这个问题。。 报错信息如下&#xff1a; 第一段报错&#xff1a; 第二段报错&#xff1a; java.net.UnknownHostException: e64682f1b276 问题定位解读&#xff1a; 错误 ja…

Android 13 - Media框架(7)- NuPlayer::Source

Source 在播放器中起着拉流&#xff08;Streaming&#xff09;和解复用&#xff08;demux&#xff09;的作用&#xff0c;Source 设计的好坏直接影响到播放器的基础功能&#xff0c;我们这一节将会了解 NuPlayer 中的通用 Source&#xff08;GenericSource&#xff09;关注本地…

Nginx配置文件详解

Nginx配置文件详解 1、Nginx配置文件1.1主配置文件详解1.2子配置文件 2、全局配置部分2.1修改启动的工作进程数&#xff08;worker process) 优化2.2cpu与worker process绑定2.3 PID 路径修改2.4 修改工作进程的优先级2.5调试工作进程打开的文件的个数2.6关闭master-worker工作…

postman接口自动化测试框架实战!

什么是自动化测试 把人对软件的测试行为转化为由机器执行测试行为的一种实践。 例如GUI自动化测试&#xff0c;模拟人去操作软件界面&#xff0c;把人从简单重复的劳动中解放出来。 本质是用代码去测试另一段代码&#xff0c;属于一种软件开发工作&#xff0c;已经开发完成的用…

git冲突处理(已commit但忘pull的情况)

一般来说&#xff0c;你只要记得先拉再传就不会有问题&#xff0c;但如果pull后没有立刻push&#xff0c;这段时间刚好有人push了&#xff0c;就会导致冲突&#xff0c;那么你可以使用以下方法进行版本回退之后合并代码 步骤&#xff1a; git log查看所有的commit&#xff0c…

为什么Spark UI上显示的Executor数量和Cores与请求值完全不符?

作为《为什么 Spark UI 上显示的 Executor Cores 与 Yarn 上的 vCore 数量不符?》的姊妹篇,我们再来看另外一种更“离奇”的情况,这种情况下,Spark UI上显示的Executor数量和每个Executor占用的核数与请求值完全对应不上。如果再仔细观察一下可以发现如下规律:实际分配的E…

SpringBoot+Vue项目添加腾讯云人脸识别

一、引言 人脸识别是一种基于人脸特征进行身份认证和识别的技术。它使用计算机视觉和模式识别的方法&#xff0c;通过分析图像或视频中的人脸特征&#xff0c;例如脸部轮廓、眼睛、鼻子、嘴巴等&#xff0c;来验证一个人的身份或识别出他们是谁。 人脸识别可以应用在多个领域…

《Kubernetes故障篇:Container runtime network not ready》

一、环境信息 操作系统K8S版本containerd版本Centos7.6v1.24.17v1.6.12 二、背景信息 1、通过以下命令检查网络插件的状态&#xff0c;发现网络插件coredns处于pending状态 2、通过以下命令检查kubelet服务状态&#xff0c;发现Container runtime network not ready等报错 三…