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

ui组件二次封装（vue）

news 来源：原创 2025/8/3 10:39:44

组件二次封装的意义

  • 保证一个系统中ui风格和功能的一致性
  • 便于维护

从属性、事件、插槽、ref这几方面考虑

  • 属性和事件的处理：ui组件上绑定$attrs（v-model本质也是一个属性加一个事件，所以也在其列）

在自定义组件中打印$attrs：父组件传递过来的所有属性和事件 - 自定义组件本身定义的属性和事件。

  • 插槽的处理：循环$slots设置ui组件插槽，并定义同名自定义组件插槽

在自定义组件中打印$slots:父组件中设置的插槽对象（键值对）

  • ref的处理（如果在自定义组件上使用ref，大概率是想用ui组件里的方法）

将ui组件实例的所有属性都放到自定义组件上

完整例子

子组件：
<template><el-input ref="elInput" v-bind="$attrs"><template v-for="(_, name) in $slots" #[name]= "scopeData"><slot :name="name" v-bind="scopeData"></slot></template></el-input>
</template>
mounted() {for (const key in this.$refs.elInput) {this[key] = this.$refs.elInput[key]}
}
----------------------------------------------------
父组件：
<my-input ref="wrapRef" v-model="inputVal" maxlength="5"><template #prefix>prefix</template>
</my-input>
data() {return {inputVal: '123'}
},
mounted() {this.$refs.wrapRef.focus()
}

相关文章：

ui组件二次封装（vue）

组件二次封装的意义 保证一个系统中ui风格和功能的一致性便于维护 从属性、事件、插槽、ref这几方面考虑 属性和事件的处理&#xff1a;ui组件上绑定$attrs&#xff08;v-model本质也是一个属性加一个事件&#xff0c;所以也在其列&#xff09; 在自定义组件中打印$attrs&am…...

编程日记 2025/8/3 10:39:44

利用大型语言模型有效识别网络威胁情报报告中的攻击技术

摘要 本研究评估了网络威胁情报&#xff08;CTI&#xff09;提取方法在识别来自网络威胁报告中的攻击技术方面的性能&#xff0c;这些报告可从网络上获取&#xff0c;并使用了 MITRE ATT&CK 框架。我们分析了四种配置&#xff0c;这些配置利用了最先进的工具&#xff0c;包…...

编程日记 2025/7/30 10:19:56

笔试模拟 day4

观前提醒&#xff1a; 笔试所有系列文章均是记录本人的笔试题思路与代码&#xff0c;从中得到的启发和从别人题解的学习到的地方&#xff0c;所以关于题目的解答&#xff0c;只是以本人能读懂为目标&#xff0c;如果大家觉得看不懂&#xff0c;那是正常的。如果对本文的某些知…...

编程日记 2025/7/31 17:34:34

TCP的连接管理

三次握手 什么是三次握手&#xff1f; 1. 第一次握手&#xff08;客户端 → 服务器&#xff09; 客户端发送一个 SYN 报文&#xff0c;请求建立连接。 报文中包含一个初始序列号 SEQ x。 表示&#xff1a;我想和你建立连接&#xff0c;我的序列号是 x。 2. 第二次握手&a…...

编程日记 2025/7/30 11:54:05

ffmpeg 写入avpacket时候，即av_interleaved_write_frame方法是如何不需要 业务层释放avpacket的 逻辑分析

我们在通过 av_interleaved_write_frame方法 写入 avpacket的时候&#xff0c;通常不需要关心 avpacket的生命周期。 本文分析一下内部实现的部分。 ----> 代表一个内部实现。 A(){ B(); C(); } B(){ D(); } 表示为: A ---->B(); ---->D(); ---->C(); int…...

编程日记 2025/7/30 11:54:03

【MyBatis-7】深入理解MyBatis二级缓存：提升应用性能的利器

在现代应用开发中&#xff0c;数据库访问往往是性能瓶颈之一。作为Java生态中广泛使用的ORM框架&#xff0c;MyBatis提供了一级缓存和二级缓存机制来优化数据库访问性能。本文将深入探讨MyBatis二级缓存的工作原理、配置方式、使用场景以及最佳实践&#xff0c;帮助开发者充分利…...

编程日记 2025/7/30 11:54:01

扫雷革命：矩阵拓扑与安全扩散的数学之美

目录 扫雷革命：矩阵拓扑与安全扩散的数学之美引言第一章 雷区生成算法1.1 组合概率模型1.2 矩阵编码体系第二章 数字计算系统2.1 卷积核运算2.2 边缘处理第三章 安全扩散机制3.1 广度优先扩散3.2 记忆化加速第四章 玩家推理模型4.1 线性方程组构建4.2 概率决策模型第五章 高级…...

编程日记 2025/8/4 0:30:44

通俗的桥接模式

桥接模式&#xff08;Bridge Pattern&#xff09; 就像一座桥&#xff0c;把两个原本独立变化的东西连接起来&#xff0c;让它们可以各自自由变化&#xff0c;互不干扰。简单来说&#xff0c;就是 “把抽象和实现分开&#xff0c;用组合代替继承”。 一句话理解桥接模式 假设你…...

编程日记 2025/7/30 11:53:57

金丝猴食品：智能中枢AI-COP构建全链路数智化运营体系

“金丝猴奶糖”&#xff0c;这个曾藏在无数人童年口袋里的甜蜜符号&#xff0c;如今正经历一场数智焕新。当传统糖果遇上数字浪潮&#xff0c;这家承载着几代人味蕾记忆的企业&#xff0c;选择以数智化协同运营平台为“新配方”&#xff0c;将童年味道酿成智慧管理的醇香——让…...

编程日记 2025/7/30 11:53:55

基于定制开发开源AI智能名片S2B2C商城小程序的公私域流量融合运营策略研究

摘要&#xff1a;本文以定制开发开源AI智能名片S2B2C商城小程序为技术载体&#xff0c;系统探讨公域流量向私域流量沉淀的数字化路径。研究通过分析平台流量&#xff08;公域流量&#xff09;与私域流量的共生关系&#xff0c;提出"公域引流-私域沉淀-数据反哺"的闭环…...

编程日记 2025/7/30 11:53:53

一、数据仓库基石：核心理论、分层艺术与 ETL/ELT 之辨

随着企业数据的爆炸式增长&#xff0c;如何有效地存储、管理和分析这些数据&#xff0c;从中提炼价值&#xff0c;成为现代企业的核心竞争力之一。数据仓库 (Data Warehouse, DW) 正是为此而生的关键技术。理解其基础理论对于构建高效的数据驱动决策体系至关重要。 一、数据库…...

编程日记 2025/8/4 0:31:40

智慧能源大数据平台建设方案（PPT）

1、建设背景 2、建设思路 3、建设架构 4、应用场景 5、展望 软件开发全方位管理资料包清单概览&#xff1a; 任务部署指令书&#xff0c;可行性研究报告全集&#xff0c;项目启动审批文件&#xff0c;产品需求规格详尽说明书&#xff0c;需求调研策略规划&#xff0c;用户调研问…...

编程日记 2025/8/4 0:30:44

递归函数（斐波那契数列0,1,1,2,3,5,8,13,21,34,55...）

目录 一、斐波那契数列&#xff08;兔子问题&#xff09; 二、迭代法&#xff08;用while循环推下一项 ) 三、递归函数 (函数的定义中调用函数自身的一种函数定义方式) 四、递归函数的底层逻辑推理 (二叉树推倒最左下节点回退法) 一、斐波那契数列&#xff08;兔子问题&…...

编程日记 2025/7/30 22:50:48

Python 从 SQLite 数据库中批量提取图像数据

Python 从 SQLite 数据库中批量提取图像数据 flyfish 实现了一个可扩展的 SQLite 图像导出工具&#xff0c;能够自动检测图像格式、处理数据前缀&#xff0c;并将数据库中的二进制图像数据导出为文件系统中的标准图像文件 import os import sqlite3 from typing import Dict…...

编程日记 2025/7/31 16:07:45

rust-candle学习笔记12-实现因果注意力

参考&#xff1a;about-pytorch 定义结构体&#xff1a; struct CausalAttention {w_qkv: Linear,dropout: Dropout, d_model: Tensor,mask: Tensor,device: Device, } 定义new方法&#xff1a; impl CausalAttention {fn new(vb: VarBuilder, embedding_dim: usize, ou…...

编程日记 2025/7/31 23:30:02

vue3使用tailwindcss报错问题

npm create vitelatestnpm install -D tailwindcss postcss autoprefixernpx tailwindcss init 4. 不过执行 npx tailwindcss init 的时候控制台就报错了PS E:\vite-demo> npx tailwindcss init npm ERR! cb.apply is not a function npm ERR! A complete log of this run c…...

编程日记 2025/8/4 0:31:41

MySQL COUNT(*) 查询优化详解！

目录 前言1. COUNT(*) 为什么慢&#xff1f;—— InnoDB 的“计数烦恼” &#x1f914;2. MySQL 执行 COUNT(*) 的方式 (InnoDB)3. COUNT(*) 优化策略&#xff1a;快&#xff01;准&#xff01;狠&#xff01;策略一&#xff1a;利用索引优化带 WHERE 子句的 COUNT(*) (最常见且…...

编程日记 2025/7/31 22:32:55

5.Redission

5.1 前文锁问题 基于 setnx 实现的分布式锁存在下面的问题&#xff1a; 重入问题&#xff1a;重入问题是指 获得锁的线程可以再次进入到相同的锁的代码块中&#xff0c;可重入锁的意义在于防止死锁&#xff0c;比如 HashTable 这样的代码中&#xff0c;他的方法都是使用 sync…...

编程日记 2025/7/31 4:03:54

RAG 赋能客服机器人：多轮对话与精准回复

一、引言 在人工智能技术飞速发展的今天&#xff0c;客服机器人已成为企业提升服务效率的重要工具。然而&#xff0c;传统客服系统在多轮对话连贯性和精准回复能力上存在明显短板。检索增强生成&#xff08;Retrieval-Augmented Generation, RAG&#xff09;技术通过结合大语言…...

编程日记 2025/8/3 1:23:03

rust-candle学习笔记13-实现多头注意力

参考&#xff1a;about-pytorch 定义结构体&#xff1a; use core::f32;use candle_core::{DType, Device, Result, Tensor}; use candle_nn::{embedding, linear_no_bias, linear, ops, Dropout, Linear, Module, VarBuilder, VarMap};struct MultiHeadAttention {w_qkv: Li…...

编程日记 2025/7/30 10:05:56

PyTorch API 5 - 全分片数据并行、流水线并行、概率分布

文章目录 全分片数据并行 (FullyShardedDataParallel)torch.distributed.fsdp.fully_shardPyTorch FSDP2 (fully_shard) Tensor Parallelism - torch.distributed.tensor.parallel分布式优化器流水线并行为什么需要流水线并行&#xff1f;什么是 torch.distributed.pipelining&…...

编程日记 2025/8/2 23:45:54

STL-list

一、 list的介绍 std::list 是 C 标准模板库&#xff08;STL&#xff09;中的一种双向链表容器。每个元素包含指向前后节点的指针&#xff0c;支持高效插入和删除操作&#xff0c;但随机访问性能较差。 1. list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#x…...

编程日记 2025/7/31 15:16:05

WPF中如何自定义控件

WPF自定义控件简化版&#xff1a;账户菜单按钮&#xff08;AccountButton&#xff09; 我们以**“账户菜单按钮”为例&#xff0c;用更清晰的架构实现一个支持标题显示、渐变背景、选中状态高亮**的自定义控件。以下是分步拆解&#xff1a; 一、控件核心功能 我们要做一个类似…...

编程日记 2025/8/3 13:33:38

华为云Git使用与GitCode操作指南

案例介绍 本文档带领开发者学习如何在云主机上基于GitCode来使用Git来管理自己的项目代码，并使用一些常用的Git命令来进行Git环境的设置。 案例内容 1 概述 1.1 背景介绍 Git 是一个快速、可扩展的分布式版本控制系统，它拥有异常丰富的命令集，可以提供高级操作和对内部…...

编程日记 2025/7/31 11:42:18

UniRepLknet助力YOLOv8：高效特征提取与目标检测性能优化

文章目录 一、引言二、UniRepLknet 的框架原理&#xff08;一&#xff09;架构概述&#xff08;二&#xff09;架构优势 三、UniRepLknet 在 YOLOv8 中的集成&#xff08;一&#xff09;集成方法&#xff08;二&#xff09;代码实例 四、实验与对比&#xff08;一&#xff09;对…...

编程日记 2025/8/2 16:23:29

【软件工程】基于频谱的缺陷定位

基于频谱的缺陷定位&#xff08;Spectrum-Based Fault Localization, SBFL&#xff09;是一种通过分析程序执行覆盖信息&#xff08;频谱数据&#xff09;来定位代码中缺陷的方法。其核心思想是&#xff1a;通过测试用例的执行结果&#xff08;成功/失败&#xff09;和代码覆盖…...

编程日记 2025/7/31 20:30:28

stm32之IIC

目录 1.I2C1.1 简介1.2 硬件电路1.3 时序基本单元1.4 时序实例1.4.1 指定地址写1.4.2 当前地址读1.4.3 指定地址读 2.MPU60502.1 简介2.2 参数2.3 硬件电路2.4 框图2.5 文档 3.软件操作MPU60504.I2C通信外设4.1 简介4.2 I2C框图4.3 基本结构4.4 主机发送/接收4.5 软件/硬件波形…...

编程日记 2025/7/30 22:50:46

阿里云购买ECS 安装redis mysql nginx jdk 部署jar 部署web

阿里云服务维护 1.安装JDK 查询要安装jdk的版本,命令&#xff1a;yum -y list java* 命令&#xff1a;yum install -y java-1.8.0-openjdk.x86_64 yum install -y java-17-openjdk.x86_64 2.安装nginx 启用 EPEL 仓库 sudo yum install epel-release 安装 Nginx sudo yum …...

编程日记 2025/7/30 22:50:43

记录 ubuntu 安装中文语言出现 software database is broken

搜索出来的结果是 sudo apt-get install language-pack-zh-han* 然而,无效,最后手动安装如下 apt install language-pack-zh-hans apt install language-pack-zh-hans-base apt install language-pack-gnome-zh-hans apt install fonts-arphic-uming apt install libreoffic…...

编程日记 2025/8/1 4:56:27

质数和约数

一、知识和经验 把质数和约数放在一起就是因为他们有非常多的联系&#xff0c;为了验证这个观点我们可以先学习唯一分解定理&#xff1a;一个大于 1 的自然数一定能被唯一分解为有限个质数的乘积。 而且一个数不仅能被质数分解&#xff0c;原本也应该被自己的约数分解&#xf…...

编程日记 2025/7/30 19:25:36

OSPF的四种特殊区域（Stub、Totally Stub、NSSA、Totally NSSA）详解

OSPF的四种特殊区域&#xff08;Stub、Totally Stub、NSSA、Totally NSSA&#xff09;通过限制LSA的传播来优化网络性能&#xff0c;减少路由表规模。以下是它们的核心区别&#xff1a; 1. Stub 区域&#xff08;末梢区域&#xff09; 允许的LSA类型&#xff1a;Type 1-3&#…...

编程日记 2025/8/2 16:38:20

Docker中运行的Chrome崩溃问题解决

问题 各位看官是否在 Docker 容器中的 Linux 桌面环境&#xff08;如Xfce&#xff09;上启动Chrome &#xff0c;遇到了令人沮丧的频繁崩溃问题&#xff1f;尤其是在打开包含图片、视频的网页&#xff0c;或者进行一些稍复杂的操作时&#xff0c;窗口突然消失&#xff1f;如果…...

编程日记 2025/7/30 18:36:28

【从零实现JsonRpc框架#3】线程模型与性能优化

1.Muduo 的线程模型 Muduo 基于 Reactor 模式 &#xff0c;采用 单线程 Reactor 和 多线程 Reactor 相结合的方式&#xff0c;通过事件驱动和线程池实现高并发。 1. 单线程模型 核心思想 &#xff1a;所有 I/O 操作&#xff08;accept、read、write&#xff09;和业务逻辑均…...

编程日记 2025/7/30 22:50:34

Kubernetes资源管理之Request与Limit配置黄金法则

一、从"酒店订房"看K8s资源管理 想象你经营一家云上酒店&#xff08;K8s集群&#xff09;&#xff0c;每个房间&#xff08;Node节点&#xff09;都有固定数量的床位&#xff08;CPU&#xff09;和储物柜&#xff08;内存&#xff09;。当客人&#xff08;Pod&#…...

编程日记 2025/7/30 22:50:32

Windows 上使用 WSL 2 后端的 Docker Desktop

执行命令 docker pull hello-world 执行命令 docker run hello-world 执行命令 wsl -d Ubuntu...

编程日记 2025/8/1 13:08:22

OpenLayers根据任意数量控制点绘制贝塞尔曲线

以下是使用OpenLayers根据任意数量控制点绘制贝塞尔曲线的完整实现方案。该方案支持三个及以上控制点&#xff0c;使用递归算法计算高阶贝塞尔曲线。 实现思路 贝塞尔曲线原理&#xff1a;使用德卡斯特里奥算法&#xff08;De Casteljau’s Algorithm&#xff09;递归计算任意…...

编程日记 2025/7/30 20:45:54

使用 Jackson 在 Java 中解析和生成 JSON

JSON（JavaScript Object Notation）是一种轻量级、跨语言的数据交换格式，因其简单易读和高效解析而广泛应用于 Web 开发、API 通信和数据存储。在 Java 中，处理 JSON 是许多应用程序的核心需求，尤其是在与 RESTful 服务交互或管理配置文件时。Jackson 是一个功能强大且广受…...

编程日记 2025/7/30 11:53:49

Qt中在子线程中刷新UI的方法

Qt中在子线程中刷新UI的方法 在Qt中UI界面并不是线程安全的&#xff0c;意味着在子线程中不能随意操作UI界面组件&#xff08;比如按钮、标签&#xff09;等&#xff0c;如果强行操作这些组件有可能会导致程序崩溃。那么在Qt中如何在子线程中刷新UI控件呢&#xff1f; 两种方…...

编程日记 2025/7/30 20:45:52

封装 RabbitMQ 消息代理交互的功能

封装了与 RabbitMQ 消息代理交互的功能&#xff0c;包括发送和接收消息&#xff0c;以及管理连接和通道。 主要组件 依赖项&#xff1a; 代码使用了多个命名空间&#xff0c;包括 Microsoft.Extensions.Configuration&#xff08;用于配置管理&#xff09;、RabbitMQ.Client&a…...

编程日记 2025/7/30 20:45:50

关于ffmpeg的简介和使用总结

主要参考&#xff1a; 全网最全FFmpeg教程&#xff0c;从新手到高手的蜕变指南 - 知乎 (zhihu.com) FFmpeg入门教程&#xff08;非常详细&#xff09;从零基础入门到精通&#xff0c;看完这一篇就够了。-CSDN博客 FFmpeg教程&#xff08;超级详细版&#xff09; - 个人文章 - S…...

编程日记 2025/7/30 16:37:05

计算机图形学编程(使用OpenGL和C++)(第2版)学习笔记 08.阴影

阴影 没有阴影的渲染效果如下&#xff0c;看起来不真实&#xff1a; 有阴影的渲染效果如下&#xff0c;看起来真实&#xff1a; 显示阴影有两种方式&#xff0c;一种是原书中的方式&#xff0c;另一种是采用光线追踪技术&#xff0c;该技术可以参考ShaderToy学习笔记 08.阴…...

编程日记 2025/8/1 3:59:18

[面试]SoC验证工程师面试常见问题（七）低速接口篇

SoC验证工程师面试常见问题（七）低速接口篇 摘要：低速接口是嵌入式系统和 SoC (System on Chip) 中常用的通信接口，主要用于设备间的短距离、低带宽数据传输。相比高速接口（如 PCIe、USB 3.0），低速接口的传输速率较低（通常在 kbps 到几 Mbps 范围），但具有简单…...

编程日记 2025/8/1 17:35:13

算法训练营第十三天｜226.翻转二叉树、101. 对称二叉树、 104.二叉树的最大深度、111.二叉树的最小深度

递归 递归三部曲&#xff1a; 1.确定参数和返回值2.确定终止条件3.确定单层逻辑 226.翻转二叉树 题目 思路与解法 第一想法&#xff1a; 递归&#xff0c;对每个结点进行反转 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, le…...

编程日记 2025/8/3 3:50:59

电子电器架构 --- 车载网关的设计

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 钝感力的“钝”&#xff0c;不是木讷、迟钝&#xff0c;而是直面困境的韧劲和耐力&#xff0c;是面对外界…...

编程日记 2025/7/30 20:45:41

`C_PiperInterface` 类接口功能列表

C_PiperInterface 类接口功能列表 C_PiperInterface 提供了全面的接口&#xff0c;用于控制 Piper 机械臂的运动、查询状态、设置参数以及管理 SDK 限制。 官仓链接 以下是 C_PiperInterface 类中所有接口的功能总结&#xff1a; 1. 初始化与连接相关接口 __new__: 实现单例…...

编程日记 2025/8/3 9:29:00

D. Apple Tree Traversing 【Codeforces Round 1023 (Div. 2)】

D. Apple Tree Traversing 题目大意 有一个包含 n n n 个节点的苹果树&#xff0c;初始时每个节点上有一个苹果。你有一张纸&#xff0c;初始时纸上没有任何内容。 你需要通过以下操作遍历苹果树&#xff0c;直到所有苹果都被移除&#xff1a; • 选择一个苹果路径 ( u , v…...

编程日记 2025/7/30 20:45:37

Docker镜像搬运工：save与load命令的实战指南

在日常的容器化开发中&#xff0c;镜像的搬运和部署是每个开发者必须掌握的技能。今天我们将深入探讨Docker的"save"和"load"这对黄金搭档&#xff0c;揭秘它们在镜像管理中的妙用。 一、基础认知&#xff1a;镜像的打包与解包 docker save 和 docker loa…...

编程日记 2025/8/1 6:05:38

查看Electron 应用的调试端口

以下是一些可以知道已发布第三方 Electron 应用调试端口的方法&#xff1a; * **通过命令行参数查看** &#xff1a; * 如果该 Electron 应用在启动时添加了类似 --remote-debugging-portxxxx 或 --inspectxxxx 的参数&#xff0c;那么其调试端口就是该参数指定的端口号。比…...

编程日记 2025/8/3 14:26:52

各种环境测试

加载测试专用属性 当在测试时想要加入某些配置且对其他测试类不产生影响是可以用Import注释添加配置 测试类中启动web环境 默认为none不开启...

编程日记 2025/7/30 20:45:32

腾讯云低代码实战：零基础搭建家政维修平台

目录 1. 欢迎与项目概览1.1 教程目的与受众1.2 项目愿景与目标&#xff1a;我们要搭建一个怎样的平台&#xff1f;1.3 平台核心构成与架构解析1.4 技术栈选择与考量1.5 如何高效阅读本教程 欢迎来到“腾讯云云开发低代码实战&#xff1a;从零搭建家政维修服务平台”开发教程&am…...

编程日记 2025/8/1 5:39:35