--- alwaysApply: false --- ### 组件开发模式 #### 通用组件设计原则 **组件职责单一** - 每个组件只负责一个明确的功能 - 避免组件过于复杂，拆分成更小的子组件 - 组件应该是可复用的，不依赖特定的业务逻辑 **Props 设计规范** ```vue ``` #### 表单组件封装 **通用表单项组件** ```vue ``` **输入框组件** ```vue ``` #### 列表组件模式 **通用列表组件** ```vue ``` #### 弹窗组件模式 **通用弹窗组件** ```vue ``` #### 业务组件示例 **订单卡片组件** ```vue ``` ### 组件开发模式 #### 通用组件设计原则 **组件职责单一** - 每个组件只负责一个明确的功能 - 避免组件过于复杂，拆分成更小的子组件 - 组件应该是可复用的，不依赖特定的业务逻辑 **Props 设计规范** ```vue ``` #### 表单组件封装 **通用表单项组件** ```vue ``` **输入框组件** ```vue ``` #### 列表组件模式 **通用列表组件** ```vue ``` #### 弹窗组件模式 **通用弹窗组件** ```vue ``` #### 业务组件示例 **订单卡片组件** ```vue ```