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

关于Vue自定义组件封装的属性/事件/插槽的透传问题

news 来源：原创 2025/7/4 15:48:52

// parent.vue
<Myinputv-model="keyWords"placeholder="请输入内容"size="small"@input="input"@change="change"width="320"
><template #prepend><el-select v-model="select" placeholder="请选择" style="width: 115px"><el-option label="Restaurant" value="1" /><el-option label="Order No." value="2" /><el-option label="Tel" value="3" /></el-select></template><template #append><el-button @click="handleQuery">查询</el-button></template>
</Myinput>// child.vue<el-inputv-bind="$attrs"class="e-input":style="inputStyle"v-on="$listeners"@input="$emit('input', $event)"@change="$emit('change', $event)"><template v-for="(_, slotName) in $slots" #[slotName]><slot :name="slotName"></slot></template></el-input>

内部属性: $attrs、$listeners、$slots

一、属性的透传

v-bind=“$attrs”: 只会读取子组件【props 选项】中没有申明过的属性

二、自定义事件的透传

方式一:

v-on=“$listeners”: 会将父组件所有事件监听器传递到子组件内部元素

<el-input v-bind="$attrs" class="e-input" :style="inputStyle" v-on="$listeners">
</el-input>

方式二: 直接在子组件上触发事件

<el-inputv-bind="$attrs"class="e-input":style="inputStyle"@input="$emit('input', $event)"@change="$emit('change', $event)"
>
</el-input>

方式三: 手动触发事件

export default {props: ["value"],computed: {inputValue: {get() {return this.value;},set(val) {this.$emit("input", val);},},},methods: {handleChange(e) {this.$emit("change", e.target.value);},},
};

三、插槽的透传

“$slots”: 获取所有父组件传递的插槽(默认、具名、作用域)

<template v-for="(_, slotName) in $slots" #[slotName]><slot :name="slotName"></slot>
</template>

四、获取子组件实例

// parent.vue
<Myinput ref="elInp" />mounted() {// 输入框聚焦this.$refs.elInp.setFocus();},

//child.vue<el-inputref="inputRef"v-bind="$attrs"class="e-input":style="inputStyle"v-on="$listeners"/>methods: {setFocus() {this.$refs.inputRef.focus();},
},

el-input 二次封装示例

关于Vue自定义组件封装的属性/事件/插槽的透传问题

// parent.vue <Myinputv-model"keyWords"placeholder"请输入内容"size"small"input"input"change"change"width"320" ><template #prepend><el-select v-model"select" placeholder&qu…...

编程日记 2025/7/4 15:48:52

智能驾驶中的深度学习：基于卷积神经网络的车道线检测

摘要智能驾驶是人工智能技术的重要应用领域之一，而车道线检测是实现自动驾驶的基础功能。本文介绍了一种基于深度学习的车道线检测方法，使用卷积神经网络（CNN）对道路图像进行实时分析。文章详细阐述了数据预处理、模型构建、训练优化及实际部署的完整流程，并提供了Pytho…...

编程日记 2025/7/5 12:51:35

在 Excel xll 自动注册操作中使用东方仙盟软件2————仙盟创梦IDE

// 获取当前工作表名称string sheetName (string)XlCall.Excel(XlCall.xlfGetDocument, 7);// 构造动态名称（例如：Sheet1!MyNamedCell）string fullName $"{sheetName}!MyNamedCell";// 获取引用并设置值var namedRange (ExcelRe…...

编程日记 2025/7/5 12:23:10

【每周一个MCP】：将pytdx封装成MCP

文章目录配置文件MCP代码（其实github上都有）不错不错，星星之火可以燎原。 https://github.com/ddholiday/onedayoneMCP/tree/main/MCPs/tdx-mcp 配置文件 pytdx有两种读取数据的方式，分别是，从API读取，和从本地读取。其中，从API读取，需要IP和端口。这个官方文档…...

编程日记 2025/7/5 12:20:57

Vue3中插槽, pinia的安装和使用(超详细教程)

1. 插槽插槽是指, 将一个组件的代码片段, 引入到另一个组件。 1.1 匿名插槽通过简单的案例来学习匿名插槽，案例说明，在父组件App.vue中导入了子组件Son1.vue，父组件引用子组件的位置添加了一个片段，比如h2标签，然…...

编程日记 2025/7/5 12:11:53

【Java高阶面经：微服务篇】5.限流实战：高并发系统流量治理全攻略

一、限流阈值的三维度计算模型 1.1 系统容量基准线：压测驱动的安全水位 1.1.1 压力测试方法论测试目标：确定系统在资源安全水位（CPU≤80%，内存≤70%，RT≤500ms）下的最大处理能力测试工具：单机压测：JMeter（模拟10万并发）、wrk（低资源消耗）集群压测：LoadRunner …...

编程日记 2025/7/5 12:01:58

学习黑客了解密码学

5分钟了解密码学：从古老艺术到现代科学 🔐 作者: 海尔辛 | 发布时间: 2025-05-21 08:36:35 UTC 密码学简介：保护信息的艺术与科学 📜 密码学是研究如何安全传递和存储信息的学科。它不仅仅是加密和解密，更包含了身份…...

编程日记 2025/7/5 12:54:26

【UE5】环形菜单教程

效果步骤 1. 下载图片资源：百度网盘请输入提取码提取码:fjjx 2. 将图片资源导入工程，如下 3. 新建3个控件蓝图，这里分别命名为“WBP_CircularMenu”、“WBP_Highlight”、“WBP_Icon” 4. 打开“WBP_Icon”，设置“所需” 添加…...

编程日记 2025/7/5 12:31:31

【JVM】学习笔记

1. JVM概述 JVM是一个抽象的计算机，用于运行Java程序。它将Java字节码转化为特定平台的机器代码，确保Java程序具有跨平台性。 2. JVM架构 JVM的架构通常包括以下几个主要部分： 类加载子系统（ClassLoader）&#xff…...

编程日记 2025/7/5 11:27:01

物流项目第五期（运费计算实现、责任链设计模式运用）

前四期： 物流项目第一期（登录业务）-CSDN博客物流项目第二期（用户端登录与双token三验证）-CSDN博客物流项目第三期（统一网关、工厂模式运用）-CSDN博客物流项目第四期（运费模板列…...

编程日记 2025/7/5 12:43:38

PrintStream PrintWriter Java 打印流

使用场景： 代替 System.out 输出日志（比如 System.setOut(printStream)）需要输出各种类型（如 println(123)、println("hello")） 常用方法： print(), println() → 支持所有基本类型和对象pr…...

编程日记 2025/7/5 12:00:02

前端excel表格解析为json，并模仿excel显示

前端环境：elementUI vue2 <style lang"scss" scoped> 页面效果 jsondata为mock数据，为方便调试其内容可清空，首行（字母坐标）随数据内容自动变化，首列也是一样，模拟excel …...

编程日记 2025/7/5 12:24:23

NumPy 2.x 完全指南【十六】分割数组

文章目录 1. 数组分割1.1 split1.2 array_split1.3 vsplit1.4 hsplit1.5 dsplit1.6 unstack 1. 数组分割数组分割是指将一个数组拆分为多个子数组的操作，常用于数据处理、并行计算、分块处理等场景。NumPy 提供了多种分割函数，允许用户沿不同方向&…...

编程日记 2025/7/5 12:19:28

vue3 + vite 使用tailwindcss

第一步：安装依赖 vite版本较低（“vite”: “^4.0.0”）所以就使用低版本的tailwindcss npm install -D tailwindcss3.4.1 postcss autoprefixer第二步：配置文件生成 npx tailwindcss init -p会自动生成两个文件postcss.config.js和…...

编程日记 2025/7/5 12:40:23

K个一组链表翻转

目录 1. 题意 2. 解题思路 3. 代码 1. 题意给一个链表，按 k 进行翻转，也就是 k 2 ，两两进行翻转，如果不够2则不动。 2. 解题思路首先思考怎么翻转一个链表，反转链表：https://leetcode.cn/problems…...

编程日记 2025/7/5 12:06:18

逆向音乐APP：Python爬虫获取音乐榜单 (1)

1. 引言在数字音乐时代，许多平台如音乐有榜单，限制非付费用户访问高音质或独家内容。然而，从技术研究的角度来看，我们可以通过逆向工程和Python爬虫技术解音乐的API接口，获取付费音乐的播放链接。 2. 技术准备在当…...

编程日记 2025/7/5 13:04:43

STM32之串口通信WIFI上云

一、W模块的原理与应用基本概念如果打算让硬件设备可以通过云服务器进行通信（数据上报/指令下发），像主流的云服务器有阿里云、腾讯云、华为云，以及其他物联网云平台：巴法云.......，硬件设备需要通过TCP…...

编程日记 2025/7/5 12:32:13

Python爬虫实战：获取天气网最近一周北京的天气数据，为日常出行做参考

1. 引言随着互联网技术的发展，气象数据的获取与分析已成为智慧城市建设的重要组成部分。天气网作为权威的气象信息发布平台，其数据具有较高的准确性和实时性。然而，人工获取和分析天气数据效率低下，无法满足用户对精细化、个性化气象服务的需求。本文设计并实现了一套完整…...

编程日记 2025/7/5 12:57:36

【Java学习笔记】main方法

main 方法一、深入理解 main 方法特变注意！！ 1. 在main()方法中，我们可以直接调用 mian 方法所在类的静态方法或静态属性 2. 不能访问该类中的非静态成员，必须创建该类的一个实例对象后，才能通过这个对象去访问类中…...

编程日记 2025/7/5 12:19:29

振动分析 - 献个宝

1.一个自制的振动能量分析工具这个分析工具似乎真的定位到了故障的具体位置。 1.1对一组实验室虚拟信号的分析结果： 1.2 对现场真实数据的分析结果依照边频带的调制，和边频的缝隙宽度，基本定位到问题。追加几份待看的文档：齿轮结构的频谱特征 - 知乎使用 FFT 获得…...

编程日记 2025/7/5 12:50:38

数学实验（Matlab绘图基础）

一、二维曲线的绘制 Matlab绘图原理 MATLAB绘图的核心原理基于数据点或函数离散化，通过描点连线生成图形。以下是具体解析： 1.数据离散化二维数据通过（x, y）坐标点表示，连续函数需离散化处理（如t0:0.01…...

编程日记 2025/7/4 18:51:57

【android bluetooth 协议分析 02】【bluetooth hal 层详解 3】【高通蓝牙hal主要流程介绍-上】

1. 背景本节主要讨论高通蓝牙 hal 中，的一些流程。看看你是否都清楚如下问题： 高通芯片电如何控制？串口是在哪里控制的？固件如何下载？初始化流程是怎么样的？ 如果你已经对上述讨论的问题&#xff0c…...

编程日记 2025/7/5 12:40:23

Linux ｜ tmux ｜无法复制粘贴

问题：在Linux中使用tmux时，总是没法使用复制粘贴功能； 解决: 如果希望直接用鼠标选择并复制（类似普通终端），可以： 在 ~/.tmux.conf 中添加：sh set -g mouse on;重新加载 tmux 配置…...

编程日记 2025/7/5 11:59:03

如何通过小贝加速实现精准网络故障排查

在日常使用电脑的过程中，我们常常需要监控系统运行状态、优化性能或排查网络问题。最近发现一款名为小贝加速的桌面工具，在此分享关于小贝加速如何实现网络监控。系统优化该工具提供了简洁明了的系统优化功能。通过扫描可以清理系统冗余文件、释放内存…...

编程日记 2025/7/4 23:43:32

Nginx 网站服务

目录一：基于授权的访问控制 1：基于授权的访问控制简介 2：基于授权的访问控制步骤二：基于客户端的访问控制 1：基于客户端的访问控制简介 2：基于客户端的访问控制步骤三：Nginx 虚拟主机…...

编程日记 2025/7/5 12:37:49

Python 字典的用法和技巧

字典的创建与初始化 Python 字典是一种可变容器模型，可存储任意类型对象。字典的每个键值对用冒号分隔，键值对之间用逗号分隔，整个字典包括在花括号中。 # 创建一个空字典 empty_dict {}# 创建一个包含键值对的字典 my_dict {name: Alice…...

编程日记 2025/7/5 13:12:35

电力设备制造企业数字化转型路径研究：从生产优化到生态重构

电力设备制造业作为支撑能源革命的核心领域，其数字化转型不仅关乎企业降本增效，更是实现“双碳”目标与新型电力系统建设的关键抓手。本文基于行业标杆案例与实践经验，系统梳理电力设备企业数字化转型的五大核心路径。一、生产流程智能化&a…...

编程日记 2025/7/5 1:18:35

初识GPU加速：如何利用GPU提升AI训练效率

随着人工智能（AI）和深度学习技术的快速发展，训练深度神经网络（DNN）已经变得越来越复杂和计算密集。传统的CPU已经无法满足大量计算任务的需求，因此，GPU（图形处理单元）成为了训练深度学习模型时的必备工具。本篇文章将介绍如何利用GPU加速AI训练效率，以及在使用GPU时应…...

编程日记 2025/7/5 13:10:32

深入解析异步编程：Java NIO、Python `async/await` 与 C# `async/await` 的对比

在现代编程中，异步编程已成为处理 I/O 密集型任务（如网络请求、文件操作等）的高效方式。不同的编程语言提供了各自的异步编程模型，以提高程序的性能和资源利用率。本文将深入解析 Java 的 NIO、Python 的 async/await 和 C# 的 as…...

编程日记 2025/7/4 18:17:30

阿里云数据盘级别

数据盘PL0、PL1、PL2和PL3的区别体现在性能、容量范围以及应用场景等方面。具体分析如下： 性能 PL0：单盘最大IOPS为10,000，最大吞吐量为180MB/s。适用于中小型MySQL和SQLServer等数据库场景，中小规模ELK日志集群，SAP和…...

编程日记 2025/7/5 12:59:13

使用 Spring AI Alibaba 集成阿里云百炼大模型应用

随着人工智能技术的飞速发展，大模型在各个领域的应用越来越广泛。阿里云百炼大模型提供了强大的语言理解和生成能力，但如何将其高效地集成到实际应用中，一直是开发者关注的焦点。本文将详细介绍如何使用 Spring AI Alibaba 集成阿里云百炼大模…...

编程日记 2025/7/4 19:21:17

阿里云合集（不定期更新）

一、阿里云申请免费域名证书流程：https://blog.csdn.net/humors221/article/details/143266059 二、阿里云发送国内短信怎样编程：https://blog.csdn.net/humors221/article/details/139544193 三、阿里云ECS服务器磁盘空间不足的几个文件：h…...

编程日记 2025/7/5 6:01:01

零基础设计模式——创建型模式 - 抽象工厂模式

第二部分：创建型模式 - 抽象工厂模式 (Abstract Factory Pattern) 我们已经学习了单例模式（保证唯一实例）和工厂方法模式（延迟创建到子类）。现在，我们来探讨创建型模式中更为复杂和强大的一个——抽象工厂…...

编程日记 2025/6/27 22:57:01

ConcurrentHashMap导致的死锁事故

事故现象某线上服务共100台容器，第二天上午流量高峰期部分容器（约10%）cpu飙升，升至100%。部分堆栈信息堆栈信息如下如所示： 当前线程堆栈显示在JsonContext.get方法中调用computeIfAbsent，其Lambda表…...

编程日记 2025/6/27 22:57:22

Python高效网络爬虫开发指南

Python 网络爬虫入门与实战一、引言随着互联网数据的爆炸性增长，获取和分析这些数据变得越来越重要。网络爬虫作为数据采集的重要工具，在这其中扮演了不可或缺的角色。二、环境搭建首先我们需要安装Python环境以及一些必要的库： req…...

编程日记 2025/6/27 23:21:11

关于C++使用位运算交换变量值的分析

1、使用临时变量交换交换变量的值，最常见的方法就是用临时变量。 void swap1(int& a, int& b){int c a;a b;b c; }清晰明了。 2、位运算版对于整数类型，相信很多人都见过下面方法，可以使用位运算，从而不借用临时…...

编程日记 2025/6/27 23:16:03

06 接口自动化-框架封装思想建立之httprunner框架（下）

文章目录一、httprunner如何实现数据驱动第一种：直接在脚本里面指定参数列表，最简单。适合于参数比较少的情况。第二种：使用CSV文件，适合于参数比较大的情况。第三种方式：使用函数生成数据，适用于数据变化…...

编程日记 2025/6/27 22:56:56

Dirsearch 深度使用教程：从基础扫描到携带 Cookie 探索网站

在网络安全测试和网站信息收集过程中，Dirsearch 是一款强大的开源工具，能够快速扫描网站，找出潜在的目录和文件。而当面对需要登录才能访问的网站资源时，通过携带 Cookie 扫描，Dirsearch 可以模拟已登录状态&#xff0…...

编程日记 2025/6/27 22:57:21

垃圾回收（GC）基础原理全面解析

掌握 GC 原理，是高效 Java 开发的第一步！前言垃圾回收（Garbage Collection，简称 GC）是 Java 的核心优势之一，它让开发者无需手动管理内存，极大降低了内存泄露和悬挂指针的风险。但当应用进入高并发、大数据量的场景时，GC 机制本身反而会成为性能瓶颈。理解 GC 的原…...

编程日记 2025/6/27 23:06:05

海康NVR录像回放SDK原始流转FLV视频流：基于Java的流媒体转码（无需安装第三方插件ffmpeg）

wlinker-video-monitor 代码地址：https://gitee.com/wlinker/wlinker-video-monitor 背景与需求在安防监控、智能楼宇等场景中，海康威视设备作为行业主流硬件，常需要将录像回放功能集成到Web系统中。然而，海康设备的原始视频流…...

编程日记 2025/6/27 22:56:53

【项目】SpringBoot +MybatisPlus集成多数据源

引言应项目需求，需要引入另外的Mysql数据库，但是项目已经引入一个Mysql，这时有几种方案通过Dynamic-DataSource 框架，无缝集成但是是动态切换数据源的，跟项目需求不符合，于是采取第二种通过自定义数据…...

编程日记 2025/7/5 5:13:22

列出更新源列表（有好多个规则源，后面有介绍的） suricata-update list-sourcesName: sslbl/ja3-fingerprintsVendor: Abuse.chSummary: Abuse.ch Suricata JA3 Fingerprint RulesetLicense: CC0-1.0 Name: malsilo/win-malwareVendor: malsil…...

编程日记 2025/6/27 22:56:51

基于OpenCV的物体跟踪：CSRT算法

文章目录引言一、系统概述二、CSRT算法简介三、核心代码解析1. 初始化跟踪器和摄像头2. 主循环结构3. 目标选择与跟踪初始化4. 目标跟踪与结果显示5. 资源释放四、系统使用说明五、完整代码六、总结引言目标跟踪是计算机视觉领域的重要应用之一，广泛应用于视频…...

编程日记 2025/6/27 22:56:54

面向未来，遨游推出5G-A智能防爆对讲机等系列终端

从5G扬帆到5G-A启航，遨游通讯始终立于技术潮头。在通信技术加速向5G-A演进的关键节点，遨游通讯旗舰产品AORO M6 Pro智能防爆对讲机，不仅实现了芯片到系统架构的全面自主可控，更通过5G-A技术的高速率、低时延、广连接与通感一体能力…...

编程日记 2025/7/5 1:22:17

qt浏览文件支持惯性

#include <QApplication> #include <QListWidget> #include <QScroller> #include <QScrollerProperties>int main(int argc, char *argv[]) {QApplication app(argc, argv);// 创建列表控件并添加示例项QListWidget listWidget;for (int i 0; i <…...

编程日记 2025/6/27 23:35:47

算子窗口操作

抠图 (提取图像感兴趣的区域) * 使用halcon 抠图* 窗体属性设设置: 设置窗体绘制图案的模式 magrin边框模式(只有一个边框) * fill填充模式(边框内部会有一个遮罩层) dev_set_draw (fill)* 设置颜色 dev_set_color (green) * 设置线宽dev_set_line_width (5)read_image (Im…...

编程日记 2025/6/27 22:56:50