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

背景

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

问题驱动

遇到了什么问题？

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

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

解决方案

Context设计模式

// 创建Context
export const configProviderKey: InjectionKey<ConfigProviderInnerProps> = Symbol('configProvider');

// 提供者
export const useConfigContextProvider = (props: ConfigProviderInnerProps) => {
return provide(configProviderKey, props);
};

// 注入者
export const useConfigContextInject = () => {
return inject(configProviderKey, defaultConfigProvider);
};

// 使用示例
const { prefixCls, direction, size } = useConfigInject('button', props);

多Context组合使用

// 尺寸Context
export const SizeContext = createContext<SizeType>('middle');

// 禁用Context
export const DisabledContext = createContext<boolean>(false);

// 在组件中组合使用
const sizeContext = useInjectSize();
const disabledContext = useInjectDisabled();
const configProvider = useConfigContextInject();

const mergedSize = computed(() => props.size || sizeContext.value);
const mergedDisabled = computed(() => props.disabled || disabledContext.value);

实现细节亮点

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

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

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