Vue—— Vue 3 组件库中的Context设计模式：实现跨层级组件通信

背景

在复杂的UI组件库中，组件间需要共享状态和配置，直接的props传递会导致组件层级过深，Context模式提供了一种优雅的解决方案。

问题驱动

遇到了什么问题？

• 多层级组件间传递配置信息
• 全局状态（如禁用、尺寸）的统一管理
• 避免props drilling（props钻取）

为什么现有方案不够好？
传统的props传递方式在多层级组件中维护困难。

解决方案

Context设计模式

// 创建ContextexportconstconfigProviderKey:InjectionKey<ConfigProviderInnerProps>=Symbol('configProvider');// 提供者exportconstuseConfigContextProvider=(props:ConfigProviderInnerProps)=>{returnprovide(configProviderKey,props);};// 注入者exportconstuseConfigContextInject=()=>{returninject(configProviderKey,defaultConfigProvider);};// 使用示例const{prefixCls,direction,size}=useConfigInject('button',props);

多Context组合使用

// 尺寸ContextexportconstSizeContext=createContext<SizeType>('middle');// 禁用ContextexportconstDisabledContext=createContext<boolean>(false);// 在组件中组合使用constsizeContext=useInjectSize();constdisabledContext=useInjectDisabled();constconfigProvider=useConfigContextInject();constmergedSize=computed(()=>props.size||sizeContext.value);constmergedDisabled=computed(()=>props.disabled||disabledContext.value);

实现细节亮点

类型安全
使用TypeScript的InjectionKey确保类型安全。

默认值处理
提供合理的默认值，确保组件在未被Context包裹时也能正常工作。

性能优化
使用computed属性实现响应式，避免不必要的重渲染。