Vue组件业务逻辑复用核心是识别跨场景稳定行为并抽象为可组合单元，通过Composable封装纯逻辑、Pinia共享状态、插槽与事件定义协作边界，使组件职责明确、接口清晰、独立演化。
Vue.js 中，组件不只是 UI 的容器，更是业务逻辑的抽象载体。把业务逻辑封装进组件，关键不是“把代码塞进去”，而是有意识地识别、剥离和隔离可复用的业务片段，让组件成为职责明确、接口清晰、独立演化的单元。
识别可抽象的业务逻辑
不是所有逻辑都适合放进组件。真正值得抽象的是那些跨页面、跨场景反复出现、且具备稳定输入输出关系的业务行为。比如：
- 用户权限校验（如“是否拥有编辑权限”）——可抽象为 PermissionGuard 组件或组合式函数
- 表单提交+防重复提交+loading状态管理——可封装成带默认行为的 FormSubmitter 组件
- 分页列表的数据获取、加载、错误重试流程——可做成 PaginatedList 容器组件
- 搜索过滤 + 防抖 + 清空控制 —— 不宜写死在页面里，应抽离为可配置的 useSearchLogic composable 或 SearchControl 组件
用组合式 API 封装逻辑，而非仅靠模板
单纯靠 template + props 的组件容易沦为“样式盒子”。真正的业务逻辑复用，依赖 setup 中的响应式能力：
- 把数据获取、转换、校验、副作用等逻辑，统一收口到 composable 函数（如 useUserProfile、useOrderStatus）中，返回 computed 状态和操作方法
- 组件内部只负责消费这些逻辑，不掺杂具体实现；例如一个订单卡片组件，只需接收
orderState和refresh方法，不关心它怎么拉取、怎么缓存 - 避免在组件内直接调用 API 或硬编码业务规则；规则应由 composable 或 store 提供，组件保持“哑”状态
通过插槽与事件定义协作边界
组件要复用业务逻辑，就必须支持灵活组装。插槽和自定义事件是定义协作契约的核心手段：
- 用
<slot name="actions"></slot>让父组件决定操作区长什么样，组件只保证“操作触发时调用 onAction” - 用
emits: ['submit', 'cancel', 'edit']明确对外暴露的行为意图，而不是暴露内部方法名 - 对复杂交互（如多步骤表单），可用作用域插槽传递当前步骤状态和跳转方法，把流程控制权交还给使用者
配合 Pinia 实现跨组件业务状态共享
当多个组件需要共用同一套业务逻辑和状态（比如购物车、用户会话、全局搜索上下文），不能靠每个组件各自调用一遍 composable —— 这会导致多份独立响应式副本：
- 将核心业务状态和计算逻辑写在 Pinia store 中，例如
useCartStore()提供items、totalPrice、addItem() - 组件只通过 store 获取状态、触发动作，不维护本地副本；计算属性也应在 store 内部用
computed定义 - 对轻量场景（如局部筛选状态），可用
provide/inject+ ref + computed 组合，避免引入 store 带来的额外开销
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
