Vue——Vue 3 组件库中的复合组件设计：实现组件间的协作

背景

在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