开发组件如何降低耦合度

1. 使用单向数据流
   • 核心原则：数据从父组件流向子组件，避免数据双向绑定导致复杂性。
   • 实现方式：
     • 使用父组件通过 props 向子组件传递数据。
     • 组件通过事件向父组件发送通知（如 emit 或自定义事件）。
2. 避免组件之间的直接引用
   • 解决方案：
     • 使用 插槽（slots）传递内容。
     • 使用依赖注入或事件总线实现通信。
3. 提取通用逻辑
   • 将通用逻辑抽离成独立的工具函数或自定义 Hook（如 React 的 useState）。
   • 在 Vue 中使用 Mixin 或 Composable API。

// 提取工具函数
export function formatDate(date) {
  return new Intl.DateTimeFormat('en-US').format(date);
}

// 在组件中使用
import { formatDate } from './utils';
console.log(formatDate(new Date()));

4. 遵循组件接口设计规范

• 问题：组件暴露的接口过于复杂，或接口行为不明确，增加了使用难度。
• 解决方案：
  • 为组件设计清晰的接口，避免暴露过多的实现细节。
  • 使用默认值或类型校验（如 PropTypes 或 TypeScript）。

5. 设计基于配置的组件
   • 设计支持动态配置的组件，尽量通过传递配置对象控制行为。

const config = {
  title: 'Confirm Delete',
  message: 'Are you sure you want to delete this item?',
  confirmText: 'Delete',
  cancelText: 'Cancel',
};

<Modal :config="config" />;