当前位置： 首页 > news >正文

调用的子组件中使用v-model绑定数据以及使用@调用方法

news 来源：原创 2025/9/8 11:19:12


实例：

子组件my-date-picker：


<!--* @description: 日期组件二次封装* 解决 “日期为区间时，后端不支持传数组，而要传#分割的字符串” 
-->
<template><el-date-pickerclass="comp-my-date-picker"v-model="date"v-bind="$attrs"v-on="$listeners":value-format="valueFormat"@change="change"></el-date-picker>
</template><script>
export default {name: 'my-date-picker',model: {prop: 'value',event: 'customInput'},props: {/** 双向绑定值 */value: {type: [String, Array],default: ''},/** 当 type = daterange 时，数组拼接字符串所用的分隔符，默认# */separator: {type: String,default: '#'},/** 双向绑定的值是否转换成以separator分割的字符串 */convertToStr: {type: Boolean,default: true}},watch: {value: {handler(val) {if (val && val.split && val.split(this.separator).length === 2) {this.date = val.split(this.separator)} else {this.date = val}},immediate: true}},computed: {valueFormat() {return this.$attrs['value-format'] || this.$attrs.type === 'datetime' || this.$attrs.type === 'datetimerange'? 'yyyy-MM-dd HH:mm:ss': 'yyyy-MM-dd'}},data() {return {date: null}},created() {},mounted() {},methods: {change(val) {this.$emit('customInput', Array.isArray(val) && this.convertToStr ? val.join(this.separator) : val)}}
}
</script>
<style lang="less" scoped></style>

父组件：

 <my-date-pickerv-model="searchData.querydate"type="daterange"start-placeholder="开始时间"end-placeholder="结束时间"@customInput="search"/>

提示: 在子组件中使用v-bind="$attrs"  v-on="$listeners"就能够绑定子组件中的所有属性和方法，父组件调用使用它也能够直接使用它的属性和方法。

相关文章：

调用的子组件中使用v-model绑定数据以及使用@调用方法

实例&#xff1a; 子组件my-date-picker&#xff1a; <!--* description: 日期组件二次封装* 解决 “日期为区间时&#xff0c;后端不支持传数组&#xff0c;而要传#分割的字符串” --> <template><el-date-pickerclass"comp-my-date-picker"v-mode…...

编程日记 2025/9/8 11:19:12

指纹细节提取（Matlab实现）

指纹细节提取概述指纹作为人体生物特征识别领域中应用最为广泛的特征之一&#xff0c;具有独特性、稳定性和便利性。指纹细节特征对于指纹识别的准确性和可靠性起着关键作用。指纹细节提取&#xff0c;即从指纹图像中精确地提取出能够表征指纹唯一性的关键特征点&#xff0c;是…...

编程日记 2025/9/6 11:09:13

爱普生可编程晶振 SG-8101CE 在智能家居领域展现出的优势

在智能家居的全场景应用中&#xff0c;设备间的协同效率、数据传输的稳定性以及系统运行的可靠性&#xff0c;成为衡量用户体验的核心标准。爱普生 SG-8101CE 可编程晶振以其卓越的性能&#xff0c;为智能门锁、传感器、中控系统等设备提供核心动力&#xff0c;助力厂商打造更可…...

编程日记 2025/9/2 5:41:24

DeepSeek掘金——DeepSeek-R1图形界面Agent指南

DeepSeek掘金——DeepSeek-R1图形界面Agent指南 本文将指导你完成设置 DeepSeek R1 和 Browser Use 的过程，以创建能够执行复杂任务的 AI 代理，包括 Web 自动化、推理和自然语言交互。 开源大型语言模型 (LLM) 的兴起使得创建可与 OpenAI 的 ChatGPT Operator 等专有解决方案…...

编程日记 2025/9/2 21:15:13

Linux知识-第一天

Linux的目录机构为一个树型结构 其没有盘符这个概念&#xff0c;只有一个根目录&#xff0c;所有文件均在其之下 在Linux系统中&#xff0c;路径之间的层级关系 使用 / 开头表示根目录&#xff0c;后面的表示层级关系 Linux命令入门 Linux命令基础 Linux命令通用格式 comman…...

编程日记 2025/8/16 10:38:51

通过多线程分别获取高分辨率和低分辨率的H264码流

目录 一.RV1126 VI采集摄像头数据并同时获取高分辨率码流和低分辨率码流流程 ​编辑 1.1初始化VI模块&#xff1a; 1.2初始化RGA模块&#xff1a; 1.3初始化高分辨率VENC编码器、 低分辨率VENC编码器&#xff1a; 1.4 VI绑定高分辨率VENC编码器&#xff0c;VI绑定RGA模块…...

编程日记 2025/9/5 2:18:26

【前端】在WebStorm中安装Node.js与nvm与npm的详细过程

文章目录 一、Node.js安装二、nvm安装三、验证安装成功总结 一、Node.js安装 首先到node.js官网下载安装文件。 https://nodejs.org/zh-cn 直接运行安装文件进行安装&#xff1a; 跳过继续安装&#xff1a; 完成安装&#xff1a; 完成后的安装路径&#xff1a; 环境变量的…...

编程日记 2025/8/16 10:31:57

飞书考勤Excel导入到自己系统

此篇主要用于记录Excel一行中&#xff0c;单条数据的日期拿取&#xff0c;并判断上下班打卡情况。代码可能满足不了大部分需求&#xff0c;目前只够本公司用&#xff0c;如果需要&#xff0c;可以参考。 需要把飞书月度汇总的考勤表导入系统中可以参考下。 下图为需要获取的年…...

编程日记 2025/8/16 10:32:50

Android Flow 示例

在Android开发的世界里&#xff0c;处理异步数据流一直是一个挑战。随着Kotlin的流行&#xff0c;Flow作为Kotlin协程库的一部分&#xff0c;为开发者提供了一种全新的方式来处理这些问题。今天&#xff0c;我将深入探讨Flow的设计理念&#xff0c;并通过具体的例子展示如何在实…...

编程日记 2025/9/7 13:15:40

vue videojs使用canvas截取视频画面

前言 刚开始做的时候太多坑&#xff0c;导致一直报错&#xff1a; Uncaught (in promise) TypeError: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The provided value is not of type ‘(CSSImageValue or HTMLCanvasElement or HTMLImageElement or H…...

编程日记 2025/8/16 10:31:23

Android 获取jks的SHA1值：java.io.IOException: Invalid keystore format

命令生成 keytool -list -v -keystore 全路径.jks -alias 别名 -storepass 密码 -keypass 密码 1、遇到 的问题&#xff1a; 通过快捷键 ‘win r’ 启动的小黑框运行上面的命令会出现下面这个错误keytool 错误: java.io.IOException: Invalid keystore format 2、解决问题 …...

编程日记 2025/9/2 16:24:08

CMake学习-生成库文件来链接生成可执行文件

生成库文件的目的就是为了复用代码与功能有一个Complex类&#xff0c;正常会与main.cpp一起经过.o的编译过程后&#xff0c;生成可执行文件demo但如果想要复用Complex类&#xff0c;就需要将其编译为一个库&#xff0c;main.cpp在运行时链接这个库 生成库文件&#xff1a; gcc …...

编程日记 2025/8/16 10:31:16

Vue 3 中 unref 的作用与 Vue Router currentRoute 的知识

目录 前言1. unref2. Demo 前言 从实战中学习&#xff0c;了解一点点知识点 unref 主要用于解包 ref&#xff0c;特别是在 Vue Router 4 里&#xff0c;currentRoute 是一个响应式 ref&#xff0c;需要 .value 或 unref 来访问具体字段 1. unref unref 是 Vue 3 提供的工具函…...

编程日记 2025/8/25 5:15:48

YOLOv12：目标检测新时代的破局者

目录 一、YOLOv12 横空出世二、YOLOv12 的性能飞跃2.1 多规模优势2.2 对比超越 三、技术创新与原理剖析3.1 区域注意力模块&#xff08;Area Attention&#xff0c;A2&#xff09;3.2 残差高效层聚合网络&#xff08;R-ELAN&#xff09;3.3 架构优化细节 四、实验验证与结果分析…...

编程日记 2025/9/6 9:36:01

网络安全法与等级保护 PPT 精华汇总

资源描述 本资源文件为《网络安全法与等级保护》的PPT精华汇总&#xff0c;内容涵盖了网络安全法与等级保护的总体框架及相关标准规范。该PPT详细介绍了网络安全法与等级保护的各个章节和条款&#xff0c;并提供了基础类和应用类的相关标准文件&#xff0c;帮助读者全面了解和…...

编程日记 2025/8/16 5:45:29

coze生成的工作流，发布后，利用cmd命令行执行。可以定时发日报，周报等。让他总结你飞书里面的表格。都可以

coze生成的工作流&#xff0c;发布后&#xff0c;利用cmd命令行执行。可以定时发日报&#xff0c;周报等。让他总结你飞书里面的表格。都可以。 很简单。 准备工作&#xff0c;先发布你的工作流&#xff0c;和发布应用。 然后&#xff0c;点击扣子API 。 申请一个&#xff0…...

编程日记 2025/9/6 23:06:35

K8S学习之基础六：k8s中pod亲和性

Pod节点亲和性和反亲和性 podaffinity&#xff1a;pod节点亲和性指的是pod会被调度到更趋近与哪个pod或哪类pod。 podunaffinity&#xff1a;pod节点反亲和性指的是pod会被调度到远离哪个pod或哪类pod 1. Pod节点亲和性 requiredDuringSchedulingIgnoredDuringExecution&am…...

编程日记 2025/8/16 10:30:51

从统计学视角看机器学习的训练与推理

从统计学视角看机器学习的训练与推理 目录 引言&#xff1a;统计学与机器学习的奇妙缘分训练与推理&#xff1a;你得先学会“看数据”再“用数据”最大似然估计&#xff08;MLE&#xff09;&#xff1a;从直觉到数学证明 3.1 伯努利分布的MLE3.2 单变量高斯分布的MLE3.3 多元…...

编程日记 2025/9/8 8:12:56

《论数据分片技术及其应用》审题技巧 - 系统架构设计师

论数据分片技术及其应用写作框架 一、考点概述 本论题“论数据分片技术及其应用”主要考察的是软件工程中数据分片技术的理解、应用及其实际效果分析。考点涵盖以下几个方面&#xff1a; 首先&#xff0c;考生需对数据分片的基本概念有清晰的认识&#xff0c;理解数据分片是…...

编程日记 2025/9/5 12:51:37

【鸿蒙Next】鸿蒙与flutter使用自定义iconfont的ttf字体库对比总结

ttf的iconfont库如何获取 1、自己创建 第一步、 iconfont-阿里巴巴矢量图标库 打开网址 第二步、搜索自己的需要的图标、并且加购到购物车 第三步、点击购物车&#xff0c;添加至项目 第四步、添加至项目或者新建项目再添加 第五步、下载至本地 就得到了ttf文件 2、设计…...

编程日记 2025/9/7 12:38:19

Redis实战篇《黑马点评》8 附近商铺

8.附近商户 8.1GEO数据结构的基本用法 GEO就是Geolocation的简写形式&#xff0c;代表地理坐标。Redis在3.2版本中加入了对GEO的支持&#xff0c;允许存储地理坐标信息&#xff0c;帮助我们根据经纬度来检索数据&#xff0c;常见的命令有 GEOADD&#xff1a;添加一个地理空间…...

编程日记 2025/9/1 11:08:06

【大厂AI实践】美团：美团智能客服核心技术与实践

【大厂AI实践】美团&#xff1a;美团智能客服核心技术与实践 &#x1f31f; 嗨&#xff0c;你好&#xff0c;我是 青松 &#xff01; &#x1f308; 自小刺头深草里&#xff0c;而今渐觉出蓬蒿。 NLP Github 项目推荐&#xff1a; 【AI 藏经阁】&#xff1a;https://gitee.com…...

编程日记 2025/9/2 13:20:45

标签的ref属性 vue中为什么不用id标记标签

标签的ref属性 vue中为什么不用id标记标签 假设有一对父子组件&#xff0c;如果父组件和子组件中存在id相同的标签&#xff0c;会产生冲突。通过id获取标签会获取到先加载那个标签。 标签的ref属性的用法 在父组件App中&#xff0c;引入了子组件Person。 并使用ref标记了Pe…...

编程日记 2025/9/4 4:40:10

期权帮｜股指期货3月合约交割该如何做？

锦鲤三三每日分享期权知识&#xff0c;帮助期权新手及时有效地掌握即市趋势与新资讯&#xff01; 股指期货3月合约交割该如何做&#xff1f; 股指期货的交割日通常是合约到期月份的第三个星期五。 对于3月合约&#xff0c;若当月无特殊节假日&#xff0c;交割日就是3月的第三…...

编程日记 2025/8/27 9:13:45

Collab-Overcooked:专注于多智能体协作的语言模型基准测试平台

2025-02-27&#xff0c;由北京邮电大学和理想汽车公司联合创建。该平台基于《Overcooked-AI》游戏环境&#xff0c;设计了更具挑战性和实用性的交互任务&#xff0c;目的通过自然语言沟通促进多智能体协作。 一、研究背景 近年来&#xff0c;基于大型语言模型的智能体系统在复…...

编程日记 2025/9/2 13:02:24

[Computer Vision]实验七：图像检索

目录 一、实验内容 二、实验过程 2.1 准备数据集 2.2 SIFT特征提取 2.3 学习“视觉词典”&#xff08;vision vocabulary&#xff09; 2.4 建立图像索引并保存到数据库中 2.5 用一幅图像查询 三、实验小结 一、实验内容 实现基于颜色直方图、bag of word等方法的以图搜…...

编程日记 2025/9/7 14:56:04

访问控制列表（ACL）思科、华为

访问控制列表&#xff08;ACL&#xff09; 一、ACL的基本概念 随着网络的飞速发展&#xff0c;网络安全和网络服务质量QoS&#xff08;Quality of Service&#xff09;问题日益突出。 企业重要服务器资源被随意访问&#xff0c;企业机密信息容易泄露&#xff0c;造成安全隐患。…...

编程日记 2025/8/30 7:02:48

linux磁盘满了怎么安全删除文件

df -h 通过df -h /dir 查看被占满的目录&#xff0c;dir替换为你的文件目录 du -sh * 进入被占满的目录&#xff0c;执行 du -sh * &#xff0c;查看哪些文件占的磁盘大 查看占用磁盘最大的文件 du -sh * | sort -rh | head -n N N通常可以设置为10 有的docker容器文件太…...

编程日记 2025/9/8 3:06:02

2025国家护网HVV高频面试题总结来了04（题目+回答）

网络安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 一、HVV行动面试题分类 根据面试题的内容&#xff0c;我们将其分为以下几类&#xff1a; 漏洞利用与攻击技术 …...

编程日记 2025/9/5 21:44:41

jenkins使用插件在Build History打印基本信息

1、插件安装 分别是description setter plugin插件和user build vars插件&#xff0c;下面介绍一下这两个插件: description setter plugin&#xff1a;作用是在 Build 栏下方增加一个功能块&#xff0c;用于填写自定义信息&#xff0c;也就是 Build history 中需要显示的文字…...

编程日记 2025/8/27 17:20:38

线程池的工作流程

线程池的工作流程主要包括任务提交、线程分配、任务执行和线程回收等环节&#xff0c;以下是对其详细的描述&#xff1a; 任务提交 当有任务需要执行时&#xff0c;用户通过线程池提供的提交方法&#xff0c;如execute()或submit()方法&#xff0c;将任务&#xff08;通常是实现…...

编程日记 2025/9/4 3:23:58

《深度学习实战》第4集：Transformer 架构与自然语言处理（NLP）

《深度学习实战》第4集&#xff1a;Transformer 架构与自然语言处理&#xff08;NLP&#xff09; 在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;Transformer 架构的出现彻底改变了传统的序列建模方法。它不仅成为现代 NLP 的核心&#xff0c;还推动了诸如 BERT、…...

编程日记 2025/9/7 12:47:10

vue下载插件

1.下载路由组件 npm i vue-router2.创建router文件夹 3.创建router.js文件 import {createRouter, createWebHistory} from "vue-router"let router createRouter({history: createWebHistory(),routes: [{path: "/",component: () > import(".…...

编程日记 2025/9/7 5:19:05

两周学习安排

日常安排 白天 看 MySQL实战45讲&#xff0c;每日一讲 看 图解设计模式 每天1-2道力扣算法题&#xff08;难度中等以上&#xff09; 每天复习昨天的单词&#xff0c;记20个单词&#xff0c;写一篇阅读 晚上 写服创项目 每日产出 MySQL实战45讲 读书笔记 设计模式 读书笔…...

编程日记 2025/9/5 13:31:23

蓝桥与力扣刷题（蓝桥 k倍区间）

题目&#xff1a;给定一个长度为 N 的数列&#xff0c;A1,A2,⋯AN​&#xff0c;如果其中一段连续的子序列 Ai,Ai1,⋯Aj( i≤j ) 之和是 K 的倍数&#xff0c;我们就称这个区间[i,j] 是 K 倍区间。 你能求出数列中总共有多少个 K 倍区间吗&#xff1f; 输入描述 第一行包含两…...

编程日记 2025/9/3 22:42:52

Spring项目-抽奖系统(实操项目-用户管理接口)(END)

^__^ (oo)\______ (__)\ )\/\ ||----w | || || 一&#xff1a;前言&#xff1a; 活动创建及展示博客链接&#xff1a;Spring项目-抽奖系统(实操项目-用户管理接口)(THREE)-CSDN博客 上一次完成了活动的创建和活动的展示&#xff0c;接下来就是重头戏—…...

编程日记 2025/9/7 9:24:25

5个GitHub热点开源项目！！

1.自托管 Moonlight 游戏串流服务&#xff1a;Sunshine 主语言&#xff1a;C&#xff0c;Star&#xff1a;14.4k&#xff0c;周增长&#xff1a;500 这是一个自托管的 Moonlight 游戏串流服务器端项目&#xff0c;支持所有 Moonlight 客户端。用户可以在自己电脑上搭建一个游戏…...

编程日记 2025/9/3 0:06:59

数据结构：二叉搜索树（排序树）

1.二叉搜索树的定义 二叉搜索树要么是空树&#xff0c;要么是满足以下特性的树 &#xff08;1&#xff09;左子树不为空&#xff0c;那么左子树左右节点的值都小于根节点的值 &#xff08;2&#xff09;右子树不为空&#xff0c;那么右子树左右节点的值都大于根节点的值 &#…...

编程日记 2025/9/4 4:40:13

JavaEE--计算机是如何工作的

一、一台计算机的组成部分 1.CPU&#xff08;中央处理器&#xff09; 2.主板&#xff08;一个大插座&#xff09; 3.内存&#xff08;存储数据的主要模板&#xff09; 4.硬盘&#xff08;存储数据的主要模板&#xff09; 内存和硬盘对比&#xff1a; 内存硬盘读写速度快慢存…...

编程日记 2025/9/6 11:32:24

Redis 实战篇 ——《黑马点评》（下）

《引言》 &#xff08;下&#xff09;篇将记录 Redis 实战篇 最后的一些学习内容&#xff0c;希望大家能够点赞、收藏支持一下 Thanks♪ (&#xff65;ω&#xff65;)&#xff89;&#xff0c;谢谢大家。 传送门&#xff08;上&#xff09;&#xff1a;Redis 实战篇 ——《黑马…...

编程日记 2025/8/31 13:26:49

OpenCV计算摄影学（10）将一组不同曝光的图像合并成一张高动态范围（HDR）图像的实现类cv::MergeDebevec

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 resulting HDR 图像被计算为考虑了曝光值和相机响应的各次曝光的加权平均值。 cv::MergeDebevec 是 OpenCV 中用于将一组不同曝光的图像合并成一…...

编程日记 2025/9/3 2:26:32

Linux驱动开发之串口驱动移植

原理图 从上图可以看到RS232的串口接的是UART3&#xff0c;接下来我们需要使能UART3的收发功能。一般串口的驱动程序在内核中都有包含&#xff0c;我们配置使能适配即可。 设备树 复用功能配置 查看6ull如何进行uart3的串口复用配置&#xff1a; 设备树下添加uart3的串口复用…...

编程日记 2025/9/8 5:21:23

c语言中return 数字代表的含义

return 数字的含义&#xff1a;表示函数返回一个整数值&#xff0c;通常用于向调用者&#xff08;如操作系统或其他程序&#xff09;传递程序的执行状态或结果。 核心规则&#xff1a; return 0&#xff1a; 含义&#xff1a;表示程序或函数正常结束。 示例&#xff1a; int m…...

编程日记 2025/9/2 17:04:20

Android 端侧运行 LLM 框架 MNN 及其应用

MNN Chat Android App - 基于 MNN 引擎的智能聊天应用 一、MNN 框架简介与工作原理1.1 什么是 MNN&#xff1f;1.2 MNN 的工作原理 二、MNN Chat Android App2.1 MNN Chat 的功能2.2 MNN Chat 的优势2.3 MNN Chat Android App 的使用 三、总结 随着移动端人工智能需求的日益增长…...

编程日记 2025/8/28 9:43:00

jupyter汉化、修改默认路径详细讲解

1、配置镜像路径 修改第三方库的下载路径&#xff0c;比如&#xff1a;[清华镜像pypi](https://mirrors.tuna.tsinghua.edu.cn/help/pypi/)&#xff0c;配置镜像地址。 首先执行 pip config set global.index-url https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple 2、安…...

编程日记 2025/8/29 20:06:36

java面试笔记(二)

1.流程中如何数据回填 &#xff08;1&#xff09;方法1&#xff1a; 在工作流中有一个标识&#xff0c;每一次审批的时候去判断是否审批完成&#xff0c;然后调用反射 &#xff08;2&#xff09;方法2&#xff1a; 创建一个流程结束的监听器&#xff0c;监听流程是否结束&a…...

编程日记 2025/9/3 15:53:32

【大语言模型笔记进阶一步】提示语设计学习笔记，跳出框架思维，自己构建提示词

一、大语言模型应用场景 1. 文本生成 文本创作&#xff1a; 诗歌故事&#xff0c;剧本&#xff0c;推文帖子 摘要与改写&#xff1a; 长文本摘要与简化&#xff0c;多语言翻译与本地化 结构化生成&#xff1a; 表格&#xff0c;根据需求生成代码片段&#xff0c;API文档生成…...

编程日记 2025/9/4 17:12:57

sql调优:优化响应时间(优化sql) ； 优化吞吐量

Sql性能调优的目的 1.优化响应时间>>优化sql 经过调优后&#xff0c;执行查询、更新等操作的时候&#xff0c;数据库的反应速度更快&#xff0c;花费的时间更少。 2.优化吞吐量 即“并发”, 就是“同时处理请求”的能力。 优化sql 尽量将多条SQL语句压缩到一句>…...

编程日记 2025/9/3 20:00:40

debian/control中的包关系

软件包依赖就是软件包关系的一种&#xff0c;一般用 Depends 表示。 每个软件包都可以和其他软件包有各种不同的关系。除 Depends 外&#xff0c;还有 Recommends、Suggests、Pre-Depends、Breaks、Conflicts、Provides 和 Replaces&#xff0c;软件包管理工具&#xff08;如 …...

编程日记 2025/9/2 19:46:11

python学习第三天

条件判断 条件判断使用if、elif和else关键字。它们用于根据条件执行不同的代码块。 # 条件判断 age 18 if age < 18:print("你还是个孩子&#xff01;") elif age 18:print("永远十八岁&#xff01;") else:print("你还年轻&#xff01;")…...

编程日记 2025/9/2 16:47:12