背景
在Ant Design Vue中，很多功能需要多个组件协作完成，如Space.Compact组件与内部组件的协作。
问题驱动
遇到了什么问题？
- 如何让容器组件与子组件协作？
- 如何传递状态给子组件而不污染props？
- 如何实现组件的嵌套和扁平化？
解决方案
Context传递状态
// 紧凑模式ContextexportconstSpaceCompactItemContext=createContext<SpaceCompactItemContextType|null>(null);// 子组件ContextconstCompactItem=defineComponent({name:'CompactItem',props:spaceCompactItemProps(),setup(props,{slots}){SpaceCompactItemContext.useProvide(props);return()=>slots.default?.();},});// 使用Context的HookexportconstuseCompactItemContext=(prefixCls:Ref<string>,direction:Ref<DirectionType>)=>{constcompactItemContext=SpaceCompactItemContext.useInject();constcompactItemClassnames=computed(()=>{if(!compactItemContext)return'';const{compactDirection,isFirstItem,isLastItem}=compactItemContext;constseparator=compactDirection==='vertical'?'-vertical-':'-';returnclassNames({[`${prefixCls.value}-compact${separator}item`]:true,[`${prefixCls.value}-compact${separator}first-item`]:isFirstItem,[`${prefixCls.value}-compact${separator}last-item`]:isLastItem,});});return{compactSize:computed(()=>compactItemContext?.compactSize),compactItemClassnames,};};组件扁平化处理
// 在容器组件中处理子组件return()=>{constchildNodes=flattenChildren(slots.default?.()||[]);return(<divclass={clx.value}>{childNodes.map((child,i)=>{return(<CompactItem key={`${prefixCls.value}-item-${i}`}compactSize={props.size}compactDirection={props.direction}isFirstItem={i===0}isLastItem={i===childNodes.length-1}>{child}</CompactItem>);})}</div>);};踩坑与经验
Context嵌套
- 避免Context层级过深
- 合理使用Context的默认值
- 注意Context的性能影响
组件生命周期
- 正确处理组件的挂载和卸载
- 避免内存泄漏
- 合理使用watch和computed
