vue | vue 插件化机制，全局注册 和 局部注册
组件插件化：提升组件的可复用性、扩展性和独立性
组件插件化实现方式
├── 注册机制
│ ├── 全局注册（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 都支持组件级插件系统 |