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

Vue/React组件/指令/Hooks封装的基本原则以及示例

news 来源：原创 2025/9/19 22:41:32

一、组件封装原则与示例

Vue组件封装

  1. 核心原则
    • 单一职责：每个组件只解决一个功能（如分页、过滤表单）
    • Props控制输入：通过定义明确的Props接口接收外部数据（类型校验、默认值）
    • Emit事件通信：子组件通过$emit向父组件传递动作（如分页切换）
    • 插槽扩展性：使用<slot>支持内容动态插入（如表格头部自定义按钮）

  2. 示例：分页表格组件

    <!-- TablePagination.vue -->
<template><div><table><slot name="body" :data="list"></slot></table><div class="pagination"><button @click="prevPage">上一页</button><span>{{ currentPage }}</span><button @click="nextPage">下一页</button></div></div>
</template>
<script setup>
const props = defineProps({data: { type: Array, required: true },pageSize: { type: Number, default: 10 }
});
const emit = defineEmits(['page-change']);
const currentPage = ref(1);
const list = computed(() => props.data.slice((currentPage.value-1)*props.pageSize, currentPage.value*props.pageSize)
);
const nextPage = () => { currentPage.value++; emit('page-change', currentPage.value);
};
</script>
React组件封装

  1. 核心原则
    • 组合优于继承：通过children属性传递子元素实现布局复用
    • 受控/非受控模式：支持通过Props完全控制或内部状态管理
    • Hooks解耦逻辑：将状态管理抽取到自定义Hook中（如usePagination）

  2. 示例：受控模态框

    // Modal.jsx
import { useState } from 'react';
export const Modal = ({ isOpen, onClose, children }) => {if (!isOpen) return null;return (<div className="modal-overlay"><div className="modal-content"><button onClick={onClose}>×</button>{children}</div></div>);
};

二、指令封装（Vue专属）

核心原则

• 功能原子化：每个指令仅实现一个交互行为（如自动聚焦、权限控制）
• 生命周期绑定：通过mounted、updated等钩子实现动态响应

示例：v-loading指令
// directives/loading.js
export const vLoading = {

相关文章：

Vue/React组件/指令/Hooks封装的基本原则以及示例

一、组件封装原则与示例 Vue组件封装 核心原则 • 单一职责：每个组件只解决一个功能（如分页、过滤表单） • Props控制输入：通过定义明确的Props接口接收外部数据（类型校验、默认值） • Emit事件通信：子组件通过$emit向父组件传递动作（如分页切换） • 插槽扩展性：使用…...

编程日记 2025/9/19 22:41:32

医学分割新标杆！双路径PGM-UNet：CNN+Mamba实现病灶毫厘级捕捉

一、引言&#xff1a;医学图像分割的挑战与机遇 医学图像分割是辅助疾病诊断和治疗规划的关键技术&#xff0c;但传统方法常受限于复杂病理特征和微小结构。现有深度学习模型&#xff08;如CNN和Transformer&#xff09;虽各有优势&#xff0c;但CNN难以建模长距离依赖&…...

编程日记 2025/9/19 23:58:45

软考-高项，知识点一览十六 采购管理

十六 采购管理 项目采购管理包括从项目团队外部采购或获取所需产品、服务或成果的各个过程。被授权采购项目所需货物、服务的人员可以是项目团队、管理层或组织采购部的成员 。 管理基础 协议&#xff0f;采购合同 协议可以是合同、服务水平协议 (SLA) 、谅解备忘录、协议备…...

编程日记 2025/9/19 23:56:49

Spring MVC 视图解析器（JSP、Thymeleaf、Freemarker、 JSON/HTML、Bean）详解

Spring MVC 视图解析器详解 1. 视图解析器概述 视图解析器&#xff08;ViewResolver&#xff09;是 Spring MVC 的核心组件&#xff0c;负责将控制器返回的视图名称&#xff08;如 success&#xff09;转换为具体的 View 对象&#xff08;如 Thymeleaf 模板或 JSP 文件&#x…...

编程日记 2025/9/19 15:05:12

Joomla 常用模块 - 在线用户与Joomla 常用模块 - 自定义HTML模块

Joomla 常用模块 - 在线用户 在这一节中&#xff0c;我们将介绍如何建立在线用户模块。在线用户模块是显示当前访问网站的匿名用户&#xff08;如访客&#xff09;和注册用户&#xff08;登录用户&#xff09;的数量。 建立在线用户模块你可以参考以下步骤&#xff1a; 1、选…...

编程日记 2025/9/16 10:58:06

缓存工具类

这里写目录标题 背景代码使用 背景 写oj系统过程中&#xff0c;需要使用缓存工具类。其功能为&#xff0c;先从缓存中获取数据&#xff0c;如数据不存在&#xff0c;从数据库中获取。 代码 package xyz.wry.utils;import org.springframework.util.ObjectUtils;import java.…...

编程日记 2025/9/17 11:29:55

【C++】list底层封装和实现

目录 节点类基本框架构造函数 list类构造函数拷贝构造函数赋值重载析构函数 迭代器类前言(string和vector的区别)迭代器模版参数的说明构造函数运算符重载- -运算符的重载运算符重载!运算符的重载*运算符的重载->运算符的重载 迭代器相关函数插入和删除函数inserterase函数p…...

编程日记 2025/9/9 9:37:24

一种替代DOORS在WORD中进行需求管理的方法 （二）

一、前景 参考&#xff1a; 一种替代DOORS在WORD中进行需求管理的方法&#xff08;基于WORD插件的应用&#xff09;_doors aspice-CSDN博客 二、界面和资源 WORD2013/WORD2016 插件 【已使用该工具通过第三方功能安全产品认证】&#xff1a; 1、 核心功能 1、需求编号和跟…...

编程日记 2025/9/18 4:55:17

学习海康VisionMaster之多直线查找

一&#xff1a;进一步学习了 今天学习下VisionMaster中的多直线查找&#xff0c;这个还是拟合直线的衍生应用&#xff0c;可以在测量框内同时查找多段时间 二&#xff1a;开始学习 1&#xff1a;什么是多直线查找&#xff1f; 一个检测框&#xff0c;就可以在检测框里面同时检…...

编程日记 2025/9/19 6:46:53

MATLAB的24脉波整流器Simulink仿真与故障诊断

本博客来源于CSDN机器鱼&#xff0c;未同意任何人转载。 更多内容&#xff0c;欢迎点击本专栏目录&#xff0c;查看更多内容。 目录 0 引言 1 故障数据采集 2 故障特征提取 3 故障诊断分类 4 结语 本博客内容是在MATLAB2023下完成。 0 引言 对于电力电子电路的故障诊断…...

编程日记 2025/9/18 14:20:38

顺序表专题（C语言）

文章目录 前言一、数据结构相关概念类比说明&#xff1a;书架与数据结构 二、线性表基本概念两种实现方式对比 三、顺序表的概念及结构1. 顺序表的定义2. 静态顺序表的基本结构关键点解析&#xff1a; 3. 结构体成员解释 四、顺序表分类五、动态顺序表的实现总结 前言 在C语言…...

编程日记 2025/9/14 7:48:26

Python Cookbook-5.9 在排序完毕的序列中寻找元素

任务 你需要寻找序列中的一系列元素。 解决方案 解决方案如果列表L已经是排序完毕的状态&#xff0c;则Python 标准库提供的 bisect 模块可以很容易地检查出元素x是否在L中: import bisect x_insert_point bisect.bisect_right(L,x) x_is_present L[x_insert_point-1:x_i…...

编程日记 2025/9/19 9:07:11

Johnson算法 流水线问题 java实现

某印刷厂有 6项加工任务J1&#xff0c;J2&#xff0c;J3&#xff0c;J4&#xff0c;J5&#xff0c;J6&#xff0c;需要在两台机器Mi和M2上完 成。 在机器Mi上各任务所需时间为5,1,8,5,3,4单位; 在机器M2上各任务所需时间为7,2,2,4,7,4单位。 即时间矩阵为&#xff1a; T1 {5, …...

编程日记 2025/9/18 14:53:16

10：00开始面试，10：08就出来了，问的问题有点变态。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到8月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%…...

编程日记 2025/9/17 13:01:18

[Vue]App.vue讲解

页面中可以看见的内容不再在index.html中进行编辑&#xff0c;而是在App.vue中进行编辑。 组件化开发 在传统的html开发中&#xff0c;一个页面的资源往往都写在同一个html文件中。这种模式在开发小规模、样式简单的项目时会相当便捷&#xff0c;但当项目规模越来越大&#xf…...

编程日记 2025/9/19 15:16:04

python中的*args和**args

在 Python 里&#xff0c;*args 和 **kwargs 是两个特殊的语法&#xff0c;它们能让函数接收不定数量的参数。下面分别对它们进行介绍。 *args *args 用于向函数传递不定数量的非关键字参数&#xff0c;这些参数会被封装成一个元组。以下是示例代码&#xff1a; def sum_num…...

编程日记 2025/9/18 13:36:30

解决Spring Boot上传默认限制文件大小和完善超限异常（若依框架）

文章目录 报错信息问题分析技术原理解决方法1️⃣调整 Spring Boot 配置文件2️⃣检查内嵌 Tomcat 配置&#xff08;可选&#xff09;3️⃣ 代码自定义配置&#xff08;覆盖配置文件&#xff09; 全局异常处理代码 报错信息 org.springframework.web.multipart.MaxUploadSizeE…...

编程日记 2025/9/19 21:28:12

Pyside6使用QtWebEngine实现GUI嵌入网页内容

Pyside6是由Qt官方维护和开发的一个用于创建跨平台桌面应用程序的Python绑定库。QtWebEngine是Qt提供的一个模块&#xff0c;它基于Chromium项目&#xff0c;允许开发者在他们的应用程序中嵌入网页内容。通过结合Pyside6和QtWebEngine&#xff0c;开发者可以轻松地创建具有现代…...

编程日记 2025/9/19 9:27:24

【每日一个知识点】多项式回归（Polynomial Regression）

多项式回归&#xff08;Polynomial Regression&#xff09;是一种对非线性关系建模的回归方法&#xff0c;它是在线性回归的基础上&#xff0c;引入特征的高次项&#xff0c;从而捕捉自变量与因变量之间的非线性关系。 &#x1f539;一、基本概念 多项式回归的形式&#xff1a…...

编程日记 2025/9/19 23:57:54

最新版PhpStorm超详细图文安装教程，带补丁包（2025最新版保姆级教程）

目录 前言 一、PhpStorm最新版下载 二、PhpStorm安装 三、PhpStorm补丁 四、运行PhpStorm 前言 PhpStorm 是 JetBrains 公司推出的 专业 PHP 集成开发环境&#xff08;IDE&#xff09;&#xff0c;专为提升 PHP 开发效率设计。其核心功能包括智能代码补全、实时语法错误检…...

编程日记 2025/9/16 23:18:21

C++：模拟实现string

目录 一&#xff1a;string类 二&#xff1a;构造函数、拷贝构造函数及析构函数 1、构造函数 2、拷贝构造函数 3、析构函数 三、实现string中对容量操作的成员函数 1、size 2、capacity 3、reserve 4、resize 5、clear 6、empty 四、string类中对象的增删查改操作 …...

编程日记 2025/9/18 22:39:11

Python 小练习系列 | Vol.14：掌握偏函数 partial，用函数更丝滑！

&#x1f9e9; Python 小练习系列 | Vol.14&#xff1a;掌握偏函数 partial&#xff0c;用函数更丝滑&#xff01; 本节的 Python 小练习系列我们将聚焦一个 冷门但高能 的工具 —— functools.partial。它的作用类似于“函数的预设模板”&#xff0c;能帮你写出更加灵活、优雅…...

编程日记 2025/9/18 19:47:18

处理Excel的python库openpyxl、xlrd、xlwt、pandas有什么区别，搞懂它

openpyxl、xlrd、xlwt、pandas 都能处理 Excel 表格&#xff0c;但用途和适合的场景不同。今天做个总结&#xff1a; 库名功能支持格式读写支持样式备注openpyxl全面的.xlsx处理库.xlsx&#xff08;Excel2007&#xff09;✅✅✅首选xlrd读取.xls文件的老牌工具.xls&#xff08…...

编程日记 2025/9/19 18:57:24

【OSG学习笔记】Day 1: OSG初探——环境搭建与第一个3D窗口

什么是 OSG&#xff1f; 全称&#xff1a;OpenSceneGraph&#xff08;开源场景图&#xff09; 定位&#xff1a;一个基于 C/OpenGL 的高性能开源3D图形开发工具包&#xff0c;专注于实时渲染和复杂场景管理。 核心思想&#xff1a;通过 场景图&#xff08;Scene Graph&#xf…...

编程日记 2025/9/19 7:36:55

linux--------------进程控制(下）

一、进程等待 1.1 进程等待必要性 子进程退出后&#xff0c;若父进程不管不顾&#xff0c;可能会产生 “僵尸进程”&#xff0c;进而造成内存泄漏。进程一旦变为僵尸状态&#xff0c;即使使用 kill -9 也无法将其杀死&#xff0c;因为无法杀死一个已死的进程。父进程需要了解…...

编程日记 2025/9/19 11:34:48

【Axure元件分享】移动端滑动拨盘日期选择器

在移动端产品设计中&#xff0c;日期选择器是用户交互中常见的组件&#xff0c;尤其在预订、日程管理等场景中扮演着关键角色。本文将介绍一款基于Axure的移动端滑动拨盘日期选择器元件&#xff0c;该元件通过模拟拨盘滑动交互效果&#xff0c;为用户提供直观日期选择体验。 下…...

编程日记 2025/9/18 15:19:20

基于 JavaWeb 的 SpringBoot 在线课程会员系统设计和实现(源码+文档+部署讲解）

技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论文…...

编程日记 2025/9/19 5:06:34

Linux入门

复习:https://blog.csdn.net/ 操作系统概述 硬件和软件 计算机由硬件和软件组成 硬件:计算机系统中由电子,机械和光电元件等组成的各种物理装置的总称 软件:用户和计算机硬件之间的接口和桥梁,用户通过软件与计算机进行交流 而操作系统就是软件的一类. 操作系统 主要负…...

编程日记 2025/9/16 18:30:27

金融壹账通推出大模型一体机，加速金融行业AI落地与应用

在当前数字化和人工智能技术迅猛发展的背景下,金融行业正面临着效率提升、风险管控和客户体验优化的多重挑战。为应对这些需求,金融壹账通近期推出了全新的“大模型一体机”解决方案。该方案集算力、模型、工具链和应用场景于一体,不仅具备小投入、低门槛和私有化部署的优势,还…...

编程日记 2025/9/18 13:13:52

迁移WordPress网站(大文件版本)

安装插件All-in-One WP Migration&#xff0c;备份并下载文件&#xff0c;可以参考我的另外一篇文章wordpress 利用 All-in-One WP Migration全站转移使用工具解压缩.wpress文件 工具名称&#xff1a;wpress-extractor&#xff0c;github下载地址 或者 我已经上传&#xff0c;也…...

编程日记 2025/9/18 23:22:32

Linux普通用户怎么切换为root用户

在 Linux 中&#xff0c;普通用户切换到 root 用户的常用命令有以下几种&#xff1a; 切到root用户 sudo -i&#xff08;当前用户的密码&#xff09; su -&#xff08;需要知道root 密码&#xff09; 1. su 命令&#xff08;需要知道 root 密码&#xff09; su - 或 su - roo…...

编程日记 2025/9/18 22:21:10

WinForm真入门(11)——ComboBox控件详解

WinForm中 ComboBox 控件详解‌ ComboBox 是 WinForms 中一个集文本框与下拉列表于一体的控件&#xff0c;支持用户从预定义选项中选择或直接输入内容。以下从核心属性、事件、使用场景到高级技巧的全面解析&#xff1a; 一、ComboBox 核心属性‌ 属性说明示例‌Items‌下拉…...

编程日记 2025/9/17 14:39:29

Spring 服务调用接口时，提示You should be redirected automatically to target URL:

问题 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"><title>Redirecting...</title><h1>Redirecting...</h1><p>You should be redirected automatically to target URL: <a href"http://xxx/api/v1/branch…...

编程日记 2025/9/18 20:43:02

OpenCV--模板匹配

一、引言 在计算机视觉领域&#xff0c;模板匹配是一种用于在图像中查找特定目标的基本技术。OpenCV 作为广泛使用的计算机视觉库&#xff0c;提供了强大且易于使用的模板匹配功能。无论是在工业检测、图像识别还是机器人视觉等领域&#xff0c;模板匹配都发挥着重要作用。本文…...

编程日记 2025/9/16 23:22:45

【Ragflow】14.MinerU解析脚本，接入ragflow知识库

概述 前文写了下 MinerU 的解析效果&#xff0c;收到不少读者催更&#xff0c;想利用 MinerU 替换 Deepdoc 的原始的解析器。 我认为&#xff0c;开发新功能基本可遵循能用-好用-用好这三个阶段&#xff1a; 能用&#xff1a;先通过脚本实现该功能,主打的是能用就行 好用&am…...

编程日记 2025/9/19 21:45:35

【SpringCloud】从入门到精通（上）

今天主播我把黑马新版微服务课程MQ高级之前的内容都看完了&#xff0c;虽然在看视频的时候也记了笔记&#xff0c;但是看完之后还是忘得差不多了&#xff0c;所以打算写一篇博客再温习一下内容。 课程坐标:黑马程序员SpringCloud微服务开发与实战 微服务 认识单体架构 单体架…...

编程日记 2025/9/17 1:16:33

第一章：SQL 基础语法与数据查询

1. 什么是 SQL&#xff1f;​​ ​​SQL&#xff08;Structured Query Language&#xff09;​​ 是用于管理和操作关系型数据库的标准语言。核心功能&#xff1a; ​​数据查询​​&#xff08;SELECT&#xff09;​​数据定义​​&#xff08;CREATE、ALTER、DROP&#xff0…...

编程日记 2025/9/18 11:56:18

Openlayers：海量图形渲染之WebGL渲染

最近由于在工作中涉及到了海量图形渲染的问题&#xff0c;因此我开始研究相关的解决方案。我在网络上寻找相关的解决方案时发现许多的文章都提到利用Openlayers中的WebGLPointsLayer类&#xff0c;可以实现渲染海量的点&#xff0c;之后我又了解到利用WebGLVectorLayer类可以渲…...

编程日记 2025/9/17 13:16:53

任务调度和安全如何结合

联邦学习与隐私保护 分布式模型训练&#xff1a;各边缘节点本地训练调度模型&#xff0c;仅共享模型参数而非原始数据&#xff0c;避免隐私泄露&#xff08;参考[11]的联邦学习框架&#xff09;。差分隐私&#xff1a;在奖励计算或状态反馈中加入噪声&#xff0c;防止通过调度…...

编程日记 2025/9/16 7:38:25

ARP攻击 DAI动态ARP检测学习笔记(超详细)

一、概述 ARP(Address Resolution Protocol,地址解析协议)是将IP地址解析为以太网MAC地址(或称为物理地址)的协议,指导三层报文的转发。ARP有简单、易用的优点,但是也因为其没有任何安全认证机制而容易被攻击者利用。属于是又爱又恨的一种协议了。目前ARP攻击和ARP病毒已经成为…...

编程日记 2025/9/18 22:31:40

Springboot--Kafka客户端参数关键参数的调整方法

调整 Kafka 客户端参数需结合生产者、消费者和 Broker 的配置&#xff0c;以实现性能优化、可靠性保障或资源限制。以下是关键参数的调整方法和注意事项&#xff1a; 一、生产者参数调整 ‌max.request.size‌ ‌作用‌&#xff1a;限制单个请求的最大字节数&#xff08;包括消…...

编程日记 2025/9/19 18:16:25

NO.79十六届蓝桥杯备战|数据结构-扩展域并查集-带权并查集|团伙|食物链|银河英雄传说(C++)

扩展域并查集 普通的并查集只能解决各元素之间仅存在⼀种相互关系&#xff0c;⽐如《亲戚》题⽬中&#xff1a; a 和b 是亲戚关系&#xff0c;b 和c 是亲戚关系&#xff0c;这时就可以查找出a 和c 也存在亲戚关系。 但如果存在各元素之间存在多种相互关系&#xff0c;普通并查…...

编程日记 2025/9/19 19:44:16

蓝桥杯2022年第十三届省赛真题-统计子矩阵

题目链接&#xff1a; 代码思路&#xff1a; ①枚举上、下边界。 ②求每一列前缀和。 ②固定上下边界后&#xff0c;在通过双指针确定子矩阵的左右边界。双指针维护一个窗口 [l, r]&#xff0c;确保窗口中所有列的和(下面前缀和-上面前缀和)不超过 K。通过滑动窗口方式&…...

编程日记 2025/9/19 6:45:31

openEuler24.03 LTS下安装Spark

目录 安装模式介绍 下载Spark 安装Local模式 前提条件 解压安装包 简单使用 安装Standalone模式 前提条件 集群规划 解压安装包 配置Spark 配置Spark-env.sh 配置workers 分发到其他机器 启动集群 简单使用 关闭集群 安装YARN模式 前提条件 解压安装包 配…...

编程日记 2025/9/18 18:37:34

openEuler24.03 LTS下安装Flink

目录 Flink的安装模式下载Flink安装Local模式前提条件解压安装包启动集群查看进程提交作业文件WordCount持续流WordCount 查看Web UI配置flink-conf.yaml简单使用 关闭集群 Standalone Session模式前提条件Flink集群规划解压安装包配置flink配置flink-conf.yaml配置workers配置…...

编程日记 2025/9/18 20:44:47

Redis 持久化

一、持久化 redis 虽然是个内存数据库&#xff0c;但是 redis 支持RDB 和 AOF 两种持久化机制&#xff0c; 将数据写往磁盘&#xff0c;可以有效的避免因进程退出造成的数据丢失问题&#xff0c;当下次重启时利用之前持久化的文件即可实现数据恢复。 二、Redis 支持RDB 和 AOF …...

编程日记 2025/9/18 10:54:19

塔能科技：智能路灯物联运维产业发展现状与趋势分析

随着智慧城市建设的推进&#xff0c;智能路灯物联运维产业正经历快速发展&#xff0c;市场规模持续扩大。文章探讨了智能路灯物联运维的技术体系、市场机遇和挑战&#xff0c;并预测了未来发展趋势&#xff0c;为行业发展提供参考。 关键词 智能路灯&#xff1b;物联运维&#…...

编程日记 2025/9/18 16:20:26

前端知识点---闭包(javascript)

文章目录 1.怎么理解闭包?2.闭包的特点3.闭包的作用?4 闭包注意事项&#xff1a;5 形象理解 1.怎么理解闭包? 函数里面包着另一个函数&#xff0c;并且内部函数可以访问外部函数的变量。 <script>function outer(){let count 0return functioninner (){countconsole.l…...

编程日记 2025/9/17 12:41:07

单次 CMS Old GC 耗时长问题分析与优化

目录 一、现象说明 二、CMS GC 机制简述 三、可能导致长时间停顿的原因详细分析 &#xff08;一&#xff09;Full GC&#xff08;完全垃圾回收&#xff09; 1. 主要原因 2.参数调整 &#xff08;二&#xff09;Promotion Failure&#xff08;晋升失败&#xff09; 1. 主…...

编程日记 2025/9/17 2:31:14

Python星球日记 - 第16天：爬虫基础（仅学习使用）

&#x1f31f;引言&#xff1a; 上一篇&#xff1a;Python星球日记 - 第15天&#xff1a;综合复习&#xff08;回顾前14天所学知识&#xff09; 名人说&#xff1a;不要人夸颜色好&#xff0c;只留清气满乾坤&#xff08;王冕《墨梅》&#xff09; 创作者&#xff1a;Code_流苏…...

编程日记 2025/9/18 15:39:40