组件开发

组件开发

组件结构顺序

template → script setup lang="ts" → style scoped

组件文件组织

components/BusinessName/
├── BusinessName.vue    # 主组件
├── types.ts            # 类型定义
├── composables.ts      # 组合式函数
└── index.ts            # 导出入口

组件通信

• 父子：Props 向下 + Emits 向上
• 跨级：Provide/Inject
• 共享状态：Pinia Store
• URL 状态：useRoute/useRouter

封装原则

• 保持 Element Plus 原有功能，统一样式和交互
• 增加业务默认配置，完善 TypeScript 类型
• 提供合理的默认值，减少使用成本