SuperAPI AI 工具集

vue-component-patterns

前端与建站

查看项目

更新于 10-16 08:34

技能介绍

用途:该技能面向使用 Vue 构建可复用、易维护组件的场景,围绕组件间通信与组合展开,适用于组件库、复杂组件通信、类型安全组件 API、插槽内容投影、跨层级传值、弹窗管理与性能优化等。

主要能力:

  1. Props:支持 TypeScript 接口与 withDefaults 定义默认值,覆盖字面量类型、复杂对象、函数、泛型数组、可空与联合类型;也提供运行时校验,包括类型、必填、多类型、PropType 断言、自定义 validator。
  2. Emits:使用 defineEmits 声明类型化事件(无载荷、单载荷、多载荷、对象载荷),并支持运行时校验函数;自定义 v-model 通过 modelValue 与 update:modelValue 实现,支持多个 v-model(如 v-model:min、v-model:max)。
  3. Slots:默认插槽、具名插槽、作用域插槽(向父级暴露 item、index)、回退内容、动态插槽与 useSlots 检查,以及渲染无关组件(renderless)。
  4. Provide/Inject:基础 provide/inject、使用 InjectionKey 的类型安全写法、结合 reactive 与 readonly 的响应式传递。
  5. 组件注册与加载:全局注册、局部注册、unplugin-vue-components 自动导入、defineAsyncComponent 异步组件与 Suspense。
  6. 其他模式:Teleport 传送弹窗到 body、KeepAlive 缓存组件(include/exclude、max)、高阶组件 withLoading。

使用方式:技能以示例代码展示各模式写法,如 defineProps、withDefaults、defineEmits、provide、inject、defineAsyncComponent。文档同时给出组件设计建议:单一职责、props 向下 events 向上、使用 TypeScript、校验关键 props、提供默认值、用作用域插槽共享状态、避免 prop drilling、用 v-model 做双向绑定、用组合式函数拆分逻辑,并列出反模式如直接修改 props、组件紧耦合、滥用全局状态或 provide/inject。

限制:该技能主要提供模式与示例,未说明具体运行环境要求、安装步骤、版本兼容范围、性能数据或收费方式;示例中部分代码片段存在不完整或写法错误(如 defineProps 调用缺少类型参数),实际使用需按项目情况调整校验。