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

vue | vue 插件化机制，全局注册和局部注册

news 来源：原创 2025/6/27 23:20:41

组件插件化：提升组件的可复用性、扩展性和独立性

组件插件化实现方式
├── 注册机制
│   ├── 全局注册（app.use）→ install, 循环注册, 配置项
│   └── 局部注册（import + components）
│
├── 插件化能力设计
│   ├── Props（参数扩展）
│   ├── Slots（结构插槽）
│   ├── Events（事件机制）
│   └── Ref / 方法暴露（调用控制）

原理：

vue 插件化机制：实现了 install(app) 方法的对象，vue 会自动调用 install 注册
组件自动注册机制：循环注册多个组件，通常在UI组件库中使用
全局组件注册：使用 app.component(name, comp) 将组件注册到全局作用域

注册机制分为，局部注册和统一注册。

局部注册：每个组件内写 install

在某个页面或组件中通过 import 后手动注册，只在该作用域内生效。

实现方式：

components: { MyComponent } 写在 components 选项中
支持按需导入，减少体积

适用场景：

项目较小
不想全局污染命名空间
需要 tree-shaking（按需打包）

// MyComponent/index.ts
import type { App } from 'vue'MyComponent.install = (app: App) => {app.component(MyComponent.name, MyComponent)
}
export default MyComponent// 若需要导出类型文件
export * from '@/components/MyComponent/types'

然后统一注册：

import MyComponent from './MyComponent'
app.use(MyComponent)

优点：按需注册，tree-shaking 友好

全局注册：（插件化注册）

通过 app.use() 注册插件或组件集合，使组件在任意位置都可直接使用。

实现方式：

install 方法
批量循环注册组件集合
支持传参、全局配置（如主题、默认尺寸等）

适用场景：

组件库
可复用性强的 UI 组件
低代码平台中统一注册

思想：所有组件的导出 src/index.ts，所有组件库的入口文件，

导入所有组件，循环调用，组件放于数组中

创建install函数，返回一个函数，循环所有组件 app.component(名，组件)

导出（支持全局导入，或者单个导入）

// src/index.tsimport type { App } from 'vue'
import MyComponent1 from './MyComponent1.vue'
import MyComponent2 from './MyComponent2.vue'import xxx, { 方法 } from 'xxx'const components = [MyComponent1,MyComponent2
]
const MyPlugin = {install(app: App){components.forEach(comp => {app.component(comp.name, comp)})}
}
export default MyPlugin

// main.ts
import MyPlugins from 'src/index.ts'
app.use(MyPlugins)

组件库封装、统一注册、按需引入

插件注册，适用场景：全局注册组件、注入配置项、控制样式主题

其他常见实现方式：props插件配置、插槽slot、事件钩子、暴露和ref

✅ 1. 通过 props 插件配置（最常见）

<MyComponent :plugins="[PluginA, PluginB]" />

组件内部根据传入的 plugins 执行各插件逻辑：

props: {plugins: {type: Array,default: () => [],}
},
mounted() {this.plugins.forEach(plugin => plugin.install?.(this))
}

每个插件可以是：

const PluginA = {install(ctx) {ctx.doSomething = () => { /*...*/ }}
}

✅ 2. 插槽（slot）作为扩展点

<BaseTable><template #toolbar><Button @click="export">导出</Button></template>
</BaseTable>

这种方式可用于“插入式”扩展，灵活定制布局和行为。

✅ 3. 使用事件钩子系统

组件暴露事件（钩子），插件监听并扩展：

// 插件
plugin.install = (ctx) => {ctx.on('beforeSubmit', () => { /* 插件逻辑 */ })
}

组件：

emit('beforeSubmit');

组件插件化的优势

优势	描述
解耦	插件不修改原始组件逻辑，降低耦合度
可扩展	可随时增加/删除插件，功能灵活
复用性强	插件可以在多个组件中复用
支持生态构建	像 Element Plus、Ant Design Pro 都支持组件级插件系统

vue | vue 插件化机制，全局注册和局部注册

组件插件化：提升组件的可复用性、扩展性和独立性组件插件化实现方式 ├── 注册机制 │ ├── 全局注册（app.use）→ install, 循环注册, 配置项 │ └── 局部注册（import components） │ ├── 插件化能力…...

编程日记 2025/6/27 23:20:41

技术与情感交织的一生（八）

目录融合东西厂公接风宴头痛 “巴巴罗萨” 突击推进助攻 96小时寒冬食堂反攻消耗 Delphi 西厂内困外患 “敦刻尔克” 多线作战大撤退资源融合东西厂公初次来到纸箱厂，是主厂区，感觉很大，相对西面正在…...

编程日记 2025/6/27 13:10:11

#让我们的电脑可以支持服务访问 #需要一个web框架 #pip install Flask from flask import Flask, render_template,request from random import randint app Flask(__name__) app.route(/index) def index():uname request.args.get("uname")return f"主页&am…...

编程日记 2025/6/27 17:16:02

利用Java进行验证码的实现——算数验证码

我主要使用使用 Java Swing 库创建一个 GUI 窗口，然后在窗口中显示生成的算术验证码图片，并提供一个文本框和一个按钮，输入验证码并验证显示结果。代码如下： package calculate; import javax.swing.*; import java.awt.*; imp…...

编程日记 2025/6/27 22:46:55

OpenStack入门体验

1.1云计算概述相信大家都听到很多的阿里云、腾讯云、百度云等等这些词,那到底什么是云计算?云计算又能做什么? 1.1.1什么是云计算云计算(cloud computing)是一种基于网络的超级计算模式,基于用户的不同需求,提供所需的资源,包括计算资源、存储资源、网络资源等。云计算…...

编程日记 2025/6/27 23:36:13

实时中值滤波 + 低通滤波示例程序（STM32环境）

一、功能概述本示例实现两个滤波器： 中值滤波器（Median Filter）：对短期异常值（如尖峰噪声）有良好的抑制能力；低通滤波器（Low-Pass Filter）：对数据进行平滑…...

编程日记 2025/6/27 23:10:57

AppBarLayout+ CoordinatorLayout，ViewPager2为什么不会覆盖AppBarLayout

<?xml version"1.0" encoding"utf-8"?> <layout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:app"http://schemas.android.com/apk/res-auto"xmlns:tools"http://schemas.android.com/tools&quo…...

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

C语言——枚举

目录一、枚举的基本概念 1. 定义与语法 2. 枚举变量的声明二、枚举的特性 1. 整型常量的本质 2. 作用域规则 3. 内存占用三、枚举的使用场景 1. 替代宏定义常量 2. 状态机实现 3. 函数返回值类型四、枚举与其他类型的对比五、高级技巧与注意事项 1. 位掩码枚…...

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

148. 排序链表

题目： 给你链表的头结点 head ，请将其按升序排列并返回排序后的链表。示例1： 解题思路： 这道题是一道综合题，考察了链表中间节点合并有序链表。首先我们链表中间节点，然后从中间结点的前一个节点处断…...

编程日记 2025/6/27 13:10:43

26.【.NET8 实战--孢子记账--从单体到微服务--转向微服务】--单体转微服务--角色权限管理

在现代企业级应用中，角色权限管理是保障系统安全和提升用户体验的核心基础功能。一个高效的角色权限系统不仅能够有效防止越权访问，还能简化系统的维护和扩展。本文将系统性介绍角色权限管理的核心实现思路，包括架构设计、性能优化、安全机制…...

编程日记 2025/6/27 5:08:34

flowable查询最新定义的流程梳理

背景。使用ruoyi-flowable-plus进行二次开发。将项目与流程绑定后查询相关流程表单时发现问题。于是梳理逻辑汇总了下面的思维导图和相关代码。查询逻辑。流程定义Key 最流程新版本(orderByProcessDefinitionVersion) 取第一条流程实例最新的一条版本记录。这里一定要用流程…...

编程日记 2025/6/27 23:28:30

kafka消费的模式及消息积压处理方案

目录 1、kafka消费的流程 2、kafka的消费模式 2.1、点对点模式 2.2、发布-订阅模式 3、consumer消息积压 3.1、处理方案 3.2、积压量 4、消息过期失效 5、kafka注意事项 Kafka消费积压(Consumer Lag)是指消费者处理消息的速度跟不上生产者发送消息的速度，导致消息在…...

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

基于多模态文档解析与RAG的行业知识库构建技术指南

1. 技术背景随着企业非结构化数据（扫描件、PDF、图像等）占比超过80%，传统关键词检索已无法满足精准问答需求。本文提出融合**计算机视觉（CV）与大语言模型（LLM）**的解决方案，关键技…...

编程日记 2025/6/27 21:43:43

UVa1408/LA4018 Flight Control

UVa1408/LA4018 Flight Control 题目链接题意分析AC 代码题目链接本题是2007年icpc亚洲区域赛成都赛区的F题题意有一个N行M列的数组(1 ≤ N ≤ 50, 1 ≤ M ≤ 9)记录机场各个航班的飞行传感数据，其每个元素都是整数。如果某元素小于等于0，则其一定不…...

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

【STM32 HAL库】使用HAL库操作FLASH

操作顺序先解锁Flash，再擦除片区，再写入，写完了别忘了加锁。 HAL_FLASH_Unlock(); HAL_FLASHEx_Erase(); HAL_FLASH_Program(); HAL_FLASH_Lock();擦除操作首先有个问题，我们为什么要擦除，不能直接覆写吗&#xf…...

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

【学习笔记】2.2 Encoder-Decoder

参考资料：https://github.com/datawhalechina/happy-llm 在 Transformer 中，使用注意力机制的是其两个核心组件——Encoder（编码器）和 Decoder（解码器）。 2.2.1 Seq2Seq 模型 Seq2Seq（序列到…...

编程日记 2025/6/27 22:46:58

批量创建tmux tmux批量

目录获取空进程 tmux 获取空进程tmux并关闭批量创建tmux 批量创建tmux 设置CUDA_VISIBLE_DEVICES： python 读取CUDA_VISIBLE_DEVICES 获取空进程 tmux for session in $(tmux ls -F #S); dopid=$(tmux list-panes -t "$session" -F "#{pane_pid}"…...

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

7.索引库操作

mapping映射属性 mapping是对索引库中文档的约束常见的mapping属性包括： type 字段数据类型，常见的简单类型有： 字符串：text(可分词的文本) keyword(精确值，例如：品牌、国家，ip地址) 数值&…...

编程日记 2025/6/27 2:24:56

Transformer-BiGRU、Transformer、CNN-BiGRU、BiGRU、CNN五模型多变量时序预测

Transformer-BiGRU、Transformer、CNN-BiGRU、BiGRU、CNN五模型多变量时序预测目录 Transformer-BiGRU、Transformer、CNN-BiGRU、BiGRU、CNN五模型多变量时序预测预测效果基本介绍程序设计参考资料预测效果基本介绍 Transformer-BiGRU、Transformer、CNN-BiGRU、BiGRU、CN…...

编程日记 2025/6/27 2:40:07

ROS2 笔记汇总（2）通信接口

在 ROS 系统中，通信接口（Interface） 是节点之间传递信息的标准“语言协议”，确保了不同功能节点之间可以正确理解和使用彼此传送的数据内容。我们可以将其理解为“数据结构格式定义”，贯穿于话题（Topic&…...

编程日记 2025/6/27 23:34:25

更新已打包好的 Spring Boot JAR 文件中的 class 文件

# 1. 解压原始 JAR unzip -q original-app.jar -d temp # 2. 替换 class 文件 cp ~/projects/new-classes/*.class temp/BOOT-INF/classes/com/example/ # 3. 保留原始清单 cp temp/META-INF/MANIFEST.MF . # 4. 重新打包 jar -cf0m new-app.jar MANIFEST.MF -C temp/ . # …...

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

matlab实现求解兰伯特问题

求解兰伯特问题的matlab代码，非常好用 solve_lambertLYP.m , 1899 StumpffC.m , 136 StumpffdF.m , 294 StumpffF.m , 151 StumpffS.m , 167 Stumpffy.m , 96 text2.m , 104...

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

英福康INFICON VGC501, VGC502, VGC503 单通道、双通道和三通道测量装置

英福康INFICON VGC501, VGC502, VGC503 单通道、双通道和三通道测量装置...

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

解决IDEA插件使用Lombok找不到符号问题

https://juejin.cn/post/7013998800842784782 -Djps.track.ap.dependenciesfalse...

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

ULVAC DC-10-4P 400V input 10kW DC Pulse power supply 爱发科直流电源

ULVAC DC-10-4P 400V input 10kW DC Pulse power supply 爱发科直流电源...

编程日记 2025/6/27 23:27:25

pip安装python第三方库报错

ERROR: Could not install packages due to an OSError: [WinError 32] 另一个程序正在使用此文件，进程无法访问。: C:\\Users\\Lenovo\\AppData\\Local\\Temp\\pip-unpack-9i5hs6ml\\tensorflow-2.10.1-cp310-cp310-win_amd64.whl Consider using the --user optio…...

编程日记 2025/6/27 23:19:28

湖南大学CS-2024期末考试解析

【前言】这是一张引流贴，标准答案跳转至23级同学的博客。但需要指出，本人没来得及校准答案。感谢23级同学做出的开源贡献。【参考答案】湖南大学CS-2024期末考试解析-CSDN博客...

编程日记 2025/6/27 2:22:55

SpringBoot-Thymeleaf

大佬写的真好：Thymeleaf一篇就够了-阿里云开发者社区...

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

Docker镜像之windows系统

https://github.com/dockur/windows 在 Docker 容器中运行 Windows 功能 ISO 下载器KVM 加速基于网页的查看器使用方法启动容器并通过浏览器连接到端口 8006。整个安装过程将全自动完成，无需手动干预。当桌面界面出现时，表示 Windows 安装已完成&a…...

编程日记 2025/6/27 23:28:04

学到新的日志方法mp

使用mp技术的时候可以在类上加上注解Slf4j 就可以使用日志不需要在定义变量log,注意日志只能在方法内使用，不能在方法外进行使用...

编程日记 2025/6/27 23:34:38

PythonWeb项目开发脚手架

项目技术选型 1、FastAPI python web开发框架 2、SQLAlchemy ORM框架 (MySQL) 3、Dynaconf 配置管理 4、JWT Passlib(hash加密) 码云地址： pyhappy: Python Web 项目开发脚手架...

编程日记 2025/6/27 23:01:09

相机--相机标定

教程相机标定分类相机标定分为内参标定和外参标定。内参标定目的作用原理外参标定...

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

IoTGateway项目生成Api并通过swagger和Postman调用

IoTGateway项目生成Api并通过swagger和Postman调用-CSDN博客...

编程日记 2025/6/27 23:22:44

vscode code runner 使用python虚拟环境

转载如下： zVS Code插件Code Runner使用python虚拟环境_coderunner python-CSDN博客...

编程日记 2025/6/27 1:53:51

IEE754标准，double和int转换，在线计算器

1.在线计算器在线进制转换-IEE754浮点数16进制转换 2.标准解释西门子PLC接收的ModbusRTU数据帧中IEEE754 格式4字节数据转为浮点数转换程序_西门子modbus读取32位浮点数-CSDN博客浮点数表示（IEEE 754）_浮点数举个例子-CSDN博客 IEEE754 浮点数&a…...

编程日记 2025/6/27 23:38:00

语音转文字工具

平时工作和学习比较忙，可能没时间听讲座，只能看回放，回访也很长，这时，我们可以借助语言转文字，通过阅读文字快速了解讲座的重点，今天给大家分享一个本人经常用的语言转文字工具，改工…...

编程日记 2025/6/27 15:31:05

微前端之micro-app数据通信

在这之前如果还没接触过微前端，可以找一些视频、资料先去了解一下，就不在这里赘述了。现在常见的微前端框架包括： single-spa micro-app qiankun EMP 无界目前了解到的基本上是这些哈，大家感兴趣可以自行去了解一下，看下它们之间的区别。因为我目前使用的是mic…...

编程日记 2025/6/27 23:14:31

【代码坏味道】无用物Dispensables

💬 Comments（注释过多） 🧾 症状方法中充满了解释性注释。 🧠 问题原因作者意识到代码不易懂，靠注释来“掩盖”结构不清的问题。 🛠️ 应对方法用好名字代替注释：好名字胜过…...

编程日记 2025/6/27 22:47:11

C++ 观察者模式：设计与实现详解

一、引言在现代软件开发中，组件间的交互与通信是系统设计的核心挑战之一。观察者模式（Observer Pattern）作为一种行为设计模式，提供了一种优雅的解决方案，用于实现对象间的一对多依赖关系。本文将深入探讨 C++ 中观察者模式的设计理念、实现方式及其应用场景。二、观察…...

编程日记 2025/6/27 17:02:55

C++ 17 正则表达式

正则表达式不是C语言的一部分，这里仅做简单的介绍。将这项技术引进，在』的讨论正则表达式描述了一种字符串匹配的模式。一般使用正则表达式主要是实现下面三个需求： 1,检查一个串是否包含某种形式的子串； 2,将匹配的子串替换&a…...

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

[Windows] 剪映视频编辑处理

附链接：夸克网盘分享（点击蓝色字体自行保存下载）...

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

docker安装和镜像源替换

这个博主的方法很好：Docs...

编程日记 2025/6/27 23:15:27

MAC软件游戏打开提示已损坏

打开「终端.app」，输入以下命令并回车，输入开机密码回车 sudo spctl --master-disable 按照上述步骤操作完成后，打开「系统偏好设置」-「安全与隐私」-「通用」，确保已经修改为「任何来源」。打开「终端.app」，输入…...

编程日记 2025/6/27 23:39:32

数据库概念

1. 数据库核心组成：包括数据集合(DB)、管理系统(DBMS)和完整系统(DBS)，具有共享性、独立性、低冗余、一致性、完整性和安全性等特点。 2. 关系型数据库基础：采用二维表结构存储数据，核心概念包括表、行(元组)、列(属性)、主键(唯…...

编程日记 2025/6/27 23:34:27

每日Prompt：指尖做画

提示词微缩景观，微距摄影，俯瞰角度，特写，硕大食指手指甲，一个小小的人正在做画，小人右手拿画笔，小人左手拿调色盘，在指甲上作画，画的是中国古代山水画，背景…...

编程日记 2025/6/27 22:47:07

线程池的详细知识(含有工厂模式)

前言下午学习了线程池的知识。重点探究了ThreadPoolExecutor里面的各种参数的含义。我详细了解了这部分的知识。其中有一个参数涉及工厂模式，我将这一部分知识分享给大家~ 线程池的详细介绍(含工厂模式) 结语分享到此结束啦。byebye~...

编程日记 2025/6/27 10:30:12

【c语言输入不大于26的整数，输出全部大写字母输入3输出ABC】2022-1-30

缘由c语言简单运用，越简单越好-编程语言-CSDN问答 int x 0, n 0; scanf_s("%d", &n); //std::cin >> n;while (x<n)printf_s("%c", (char)(A x)), x; // std::cout << (char)(A x), x;...

编程日记 2025/6/27 23:17:54